-
引入datatables的css和js。
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/DataTables/media/css/jquery.dataTables.css">
<script src="${pageContext.request.contextPath}/resources/DataTables/media/js/jquery.dataTables.js"></script>
-
html如下所示
<table id="teaListTable">
<thead>
<tr>
<th><input id="checkall" type="checkbox" onclick="checkall()"/></th>
<th>教工号</th>
<th>姓名</th>
<th>头像</th>
<th>所属单位</th>
<th>职称</th>
<th>账号状态</th>
<th>文化程度</th>
<th>操作</th>
</tr>
</thead>
</table>
-
初始化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 = '<input type="checkbox" class="check_js" data-id="'+'\''+row.ID+'\''+'"/>';
return html;
},
"targets" : 0
},
{
"render" : function(data, type, row, meta){
var html = "";
if(row.PHOTO){
html =
'<img src="${pageContext.request.contextPath}/UserFiles/photo/'+row.PHOTO+'" width="40px" height="40px"/>';
}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 = '<a href="javascript:void(0)" onclick="openEditModel('+'\''+row.ID+'\''+')">修改</a>';//加单引号
//var html = '<a href="javascript:void(0)" onclick="openEditModel(\''+row.ID+'\')">修改</a>';//转义
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 = '<input type="checkbox" class="check_js" data-id="'+'\''+row.id+'\''+'"/>';
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 =
'<a href="${pageContext.request.contextPath}/examQuestionsMgr/getExamQuestionDetail?questionsId='+'\''+row.id+'\''+'" class="ops">修改</a>' +
'<a onclick="deleteExamQuestion('+'\''+row.id+'\''+')" class="ops" style="margin-left: 5px">删除</a>';
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(' <button type="button" class="layui-btn layui-btn-normal" onclick="toAddPage()" style="height:32px;line-height:32px">新增</button>' +
' <button type="button" class="layui-btn layui-btn-danger" onclick="delType()" style="height:32px;line-height:32px">删除</button>');
$("div.toolbar").append(' <button type="button" class="layui-btn layui-btn-normal" onclick="changeManyPower()" style="height:32px;line-height:32px">批量修改权限</button>');
-
展示
datatables加按钮
有问题随时留言！看到就改！么么哒！
网友评论