-
引入datatables的css和js。
-
html如下所示
教工号
姓名
头像
所属单位
职称
账号状态
文化程度
操作
-
初始化datatables
//先定义数据,接下来datatables的数据就是它
var data = [{
"ORG_NAME": "少年班学院（少年班、教改试点班）",
"ID": "P0460",
"PHOTO": "1536110909345tx.jpg",
"V2_RN": "1",
"IS_ACTIVE": "1",
"JOB_NUM": "1111",
"NAME": "齐莹"
}, {
"ORG_NAME": "少年班学院（少年班、教改试点班）",
"ID": "P0324",
"V2_RN": "2",
"IS_ACTIVE": "1",
"JOB_NUM": "1111",
"NAME": "唐宁"
},];
- 真分页写法
$('#teaListTable').DataTable({
// "dom": 'l <"div.toolbar"> tip',
"stateSave": true,
"searching" : false,
"ordering": false,
"destroy" : true,
"processing": true,
"serverSide": true,//服务器端分页
"ajax": {
"type": "POST",
"url": "${pageContext.request.contextPath}/baseinfo/getTeacherList",
"data":{
"teaName":teaName,
"orgId":currentId,
"userNum":userNum,
"cardNum":cardNum,
},
"dataSrc": function (result) {
return result.data;
}
},
"columns" : [{
data : null
},{
data : "JOB_NUM"
},{
data : "NAME"
},{
data : null
},{
data : "ORG_NAME"
},{
data : null
},{
data : null
},{
data : null
},{
data : null
}],
"columnDefs": [
{
"render" : function(data, type, row, meta){
var html = '';
return html;
},
"targets" : 0
},
{
"render" : function(data, type, row, meta){
var html = "";
if(row.PHOTO){
html =
'
';
}else{
html = "";
}
return html;
},
"targets" : 3
},
{
"render" : function(data, type, row, meta){
if(data.TEA_ZCDictName){
return data.TEA_ZCDictName == "教师职称"?"":data.TEA_ZCDictName;
}else{
return "";
}
},
"targets" : 5
},
{
"render" : function(data, type, row, meta){
if(data.WHCDDictName){
return data.WHCDDictName == "文化程度"?"":data.WHCDDictName;
}else{
return "";
}
},
"targets" : 7
},
{
"render" : function(data, type, row, meta){
return data.IS_ACTIVE == 0?"未激活":"已激活";
},
"targets" : 6
},
{
"render" : function(data, type, row, meta){
var html = '修改';//加单引号
//var html = '修改';//转义
return html;
},
"targets" : 8
},
{
"render" : function(data, type, row, meta){
if(typeof data == "undefined") {
return '';
}
return data;
},
"targets" : [0,1,2,3,4,5,6,7,8]
}
],
language : {
"processing" : "处理中...",
"lengthMenu" : "显示 _MENU_ 项结果",
"zeroRecords" : "没有匹配结果",
"info" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"infoEmpty" : "显示第 0 至 0 项结果，共 0 项",
"infoFiltered" : "(由 _MAX_ 项结果过滤)",
"infoPostFix" : "",
"search" : "搜索:",
"url" : "",
"emptyTable" : "没有数据",
"loadingRecords" : "载入中...",
"infoThousands" : "20",
"paginate" : {
"first" : "首页",
"previous" : "上页",
"next" : "下页",
"last" : "末页"
}
}
});
- 假分页写法（尽量不要用这种方法了，直接把serverSide改为false即可）
$('#teaListTable').DataTable({
/* "dom": '<"toolbar">frtip', */
data:data,
"ordering": false,
destroy : true,
"columns" : [{
data : null
},{
data : "courseName"
},{
data : "questionType"
},{
data : "degree"
},{
data : "questionName"
},{
data : "option"
},{
data : "answer"
},{
data : "addTime"
},{
data : null
}],
"columnDefs": [
{
"render" : function(data, type, row, meta){
var html = '';
return html;
},
"targets" : 0
},
{
"render" : function(data, type, row, meta){
var html ='';
if(row.questionType == '1'){
html ='选择题';
}else if(row.questionType == '2'){
html ='判断题';
}
return html;
},
"targets" : 2
},
{
"render" : function(data, type, row, meta){
var html ='';
if(row.degree == '1'){
html ='简单';
}else if(row.degree == '2'){
html ='一般';
}else if(row.degree == '3'){
html ='中等';
}else if(row.degree == '4'){
html ='困难';
}
return html;
},
"targets" : 3
},
{
"render" : function(data, type, row, meta){
if(row.questionType == '1'){
var html ='A:' + row.optionA + ',B:' + row.optionB + ',C:' + row.optionC + ',D:' + row.optionD;
}else{
var html ='';
}
return html;
},
"targets" : 5
},
{
"render" : function(data, type, row, meta){
var html ='';
if(row.answer == '1'){
html ='正确';
}else if(row.answer == '0'){
html ='错误';
}else{
html = row.answer;
}
return html;
},
"targets" : 6
},
{
"render" : function(data, type, row, meta){
var html =
'修改' +
'删除';
return html;
},
"targets" : 8
},
{
"render" : function(data, type, row, meta){
if(typeof data == "undefined") {
return '';
}
return data;
},
"targets" : [0,1,2,3,4,5,6,7,8]
}
],
language : {
"processing" : "处理中...",
"lengthMenu" : "显示 _MENU_ 项结果",
"zeroRecords" : "没有匹配结果",
"info" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"infoEmpty" : "显示第 0 至 0 项结果，共 0 项",
"infoFiltered" : "(由 _MAX_ 项结果过滤)",
"infoPostFix" : "",
"search" : "搜索:",
"url" : "",
"emptyTable" : "没有数据",
"loadingRecords" : "载入中...",
"infoThousands" : "20",
"paginate" : {
"first" : "首页",
"previous" : "上页",
"next" : "下页",
"last" : "末页"
}
}
});
-
完成
楼主引用了别的样式datatables-theme.css，才是下面这样，要不然会丑一丢丢
成果展示
-
注意事项
1.因为使用的jquery（在后面简称jq）的datatables，所以在之前一定要引用jq。同理，使用各种jq插件之前都要引入jq，否则就会报错如下（在这里我用的jq版本是jquery-2.1.1.min.js）：
未引入jq引发的错误
2.如何在datatables上加按钮
- 在初始化的时候加这条属性
"dom": 'l <"div.toolbar"> tip',
- 在初始化后渲染dom
$("div.toolbar").html(' ' +
' ');
$("div.toolbar").append(' ');
-
展示
datatables加按钮有问题随时留言！看到就改！么么哒！