页面原型
图片.png
table的动态生成代码：
var dataTable;
var $table = $("#dataTable");
/**
* dataTable事件初始化方法
*/
var handleRecords = function() {
dataTable = new Datatable();
dataTable
.init({
src : $table,
onQuery : function(data) {
data.personId = $("#personIdQuery").val();
data.personName = $("#personNameQuery").val();
data.personSex = $("#personSexQuery").val();
data.organId = $("#organQuery").val();
},
dataTable : {
"ajax" : {
"url" : basePath
+ "personInfo/getPersonInfoListPage" // ajax
// source
},
"columns" : [
{
data : 'personId',
orderable : true,
searchable : true
},
{
data : 'personName',
orderable : true,
searchable : true
},
{
data : 'personSex',
orderable : true,
render : function(data, type, full) {
return data == '1000001' ? '男' : '女';
}
},
{
data : 'organName',
orderable : true,
searchable : true
},
{
data : 'birthday',
orderable : true,
render : function(data, type, full) {
if(data==null || data ==''){
return '';
}
var date = new Date;
var year = date.getFullYear();
var month = date.getMonth()+1;
var byear = data.substring(0,4);
return year-Number(byear);
}
},
{
data : 'personLiable',
orderable : true,
searchable : true
},
{
data : 'operate',
orderable : false,
render : function(data, type, full) {
var str ='<a class="check btn default btn-xs purple" personId="'+ full.id+ '">查看</a> ';
if($("#delete").val() == 1){
str = str + '<a class="delete btn default btn-xs purple" personId="'+ full.id + '">刪除</a> ';
}
if($("#update").val() == 1){
str = str + '<a class="edit btn default btn-xs purple" personId="'+ full.id+ '">编辑</a>';
}
return str;
}
} ]
}
});
$("#dataTableReload").on("click", function() {
dataTable.reloadTable();
});
};
添加查看、删除、编辑的关键代码：
{
data : 'operate',
orderable : false,
render : function(data, type, full) {
var str ='<a class="check btn default btn-xs purple" personId="'+ full.id+ '">查看</a> ';
if($("#delete").val() == 1){
str = str + '<a class="delete btn default btn-xs purple" personId="'+ full.id + '">刪除</a> ';
}
if($("#update").val() == 1){
str = str + '<a class="edit btn default btn-xs purple" personId="'+ full.id+ '">编辑</a>';
}
return str;
}
} ]
原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe190后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
