概述
官网:http://www.datatables.club/
属性配置页面地址:http://www.datatables.club/reference/option/
注意:
int start, int length, int draw
//start :从第几个数据开始
//length :每页显示多少条数据 也就是默认的数据条数
//draw :第几页
//这几个参数 datatable会自动添加,只需要在后台接收就好
html代码:
<table class="table table-striped table-bordered table-hover" id="gzTables">
<thead>
<tr>
<th style="text-align: center;">序号</th>
<th style="text-align: center;">省</th>
<th style="text-align: center;">市</th>
<th style="text-align: center;">电厂名称</th>
<th style="text-align: center;">机组号</th>
<th style="text-align: center;">异常程度</th>
<th style="text-align: center;">设备名称</th>
<th style="text-align: center;">设备类型</th>
<th style="text-align: center;">设备型号</th>
<th id="thsj" style="text-align: center;">异常时间</th>
<th id="thlx" style="text-align: center;">异常类型</th>
<th id="thyy" style="text-align: center;">异常原因</th>
<th id="thwz" style="text-align: center;">异常位置</th>
<th style="text-align: center;">关键字</th>
<th id="thxx" style="text-align: center;">异常现象</th>
<th style="text-align: center;">操作</th>
</tr>
</thead>
</table>
js代码
$("#gzTables").dataTable({
lengthMenu: [10, 20, 30, 40],//定义在每页显示记录数的select中显示的选项。
lengthChange: false,
processing: true,//是否显示表格加载状态,在数据量大的时候需要
destroy: true,//允许销毁替换,在表格重新查询时,可以自动销毁以前的data
paging: true,//分页
serverSide: true,//开启后端分页
height: 500,
pagingType: "full_numbers",//分页样式的类型
ordering: false,//是否启用排序
searching: false,//搜索
ajax: {
type: "POST",
url: sys.rootPath + "/gzsm/queryjzgzsj.html",
dataType: "json",
data: {"Array": JSON.stringify(dataarray)},
async: false
},
language: {
"lengthMenu": "10",//默认每页小时条数
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sInfoThousands": ",",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页",
"processing": "正在处理中。。。"
},
},
columns: [//定义行数据字段
{data: 'SUMPAGE'},
{data: 'PROVINCENAME'},
{data: 'CITYNAME'},
{data: 'DCMC'},
{data: 'JZH'},
{data: 'GZORQX'},
{data: 'GZSBMC'},
{data: 'SBLXMC'},
{data: 'SBXH'},
{data: 'FXRQS'},
{data: 'GZLX'},
{data: 'GZYY'},
{data: 'GZWZ'},
{data: 'GJZ'},
{data: 'GZXX'},
{data: 'CZ'}
],
columnDefs: [//自定义处理行数据,和行样式
{"width": "3%", "targets": 0},
{"width": "4%", "targets": 1},
{"width": "4%", "targets": 2},
{"width": "6%", "targets": 3},
{
"width": "5%", "targets": 4, "render": function (data, type, row, meta) {
var jzh = row.JZH;
return jzh + "号机组";
}
},
{
"width": "4%", "targets": 5, "render": function (data, type, row, meta) {
var gzorqx = row.GZORQX;
if (gzorqx != undefined && gzorqx == 1) {
gzorqx = '故障';
} else {
gzorqx = '缺陷';
}
return gzorqx;
}
},
{"width": "4%", "targets": 6},
{"width": "4%", "targets": 7},
{
"width": "5%", "targets": 8, "render": function (data, type, row, meta) {
var sbxh = row.SBXH;
var fullsbxh = "";
if (sbxh != undefined && sbxh.length > 10) {
var fullsbxh = row.SBXH;
sbxh = sbxh.substring(1, 10);
} else {
sbxh = "";
}
return "<label data-toggle='tooltip' data-placement='top' title='" + fullsbxh + "'>" + sbxh + "</label>";
}
},
{"width": "5%", "targets": 9},
{
"width": "8%", "targets": 10, "render": function (data, type, row, meta) {
var gzlx = row.GZLX;
if (gzlx != undefined && gzlx.length > 10) {
gzlx = gzlx.substring(1, 10);
}
return gzlx;
}
},
{
"width": "8%", "targets": 11, "render": function (data, type, row, meta) {
var gzyy = row.GZYY;
if (gzyy != undefined && gzyy.length > 10) {
gzyy = gzyy.substring(1, 10);
}
return "<label data-toggle='tooltip' data-placement='top' title='" + row.GZYY + "'>" + gzyy + "</label>";
}
},
{
"width": "8%", "targets": 12, "render": function (data, type, row, meta) {
var gzwz = row.GZWZ;
if (gzwz != undefined && gzwz.length > 10) {
gzwz = gzwz.substring(1, 10);
}
return "<label data-toggle='tooltip' data-placement='top' title='" + row.GZWZ + "'>" + gzwz + "</label>";
}
},
{
"width": "8%", "targets": 13, "render": function (data, type, row, meta) {
var gjz = row.GJZ;
if (gjz != undefined && gjz.length > 10) {
gjz = gjz.substring(1, 10);
}
return "<label data-toggle='tooltip' data-placement='top' title='" + row.GJZ + "'>" + gjz + "</label>";
}
},
{
"width": "8%", "targets": 14, "render": function (data, type, row, meta) {
var gzxx = row.GZXX;
if (gzxx != undefined && gzxx.length > 10) {
gzxx = gzxx.substring(1, 10);
}
return "<label data-toggle='tooltip' data-placement='top' title='" + row.GZXX + "'>" + gzxx + "</label>";
}
},
{
// 指定第四列,从0开始,0表示第一列,1表示第二列……
"width": "6%",
"targets": 15,
"render": function (data, type, row, meta) {
var rowIndex = meta.row;//获取到该行的rowIndex
var gzbh = row.GZBH;
return "<div style='display:inline-block; cursor:pointer;' data-toggle='modal' data-target='#exampleModalDCupdate' class='edit' onclick = 'info.bjclick(" + rowIndex + ")' class='edit' title='编辑'><span class='iconfont icon-bianji'></span></div>" +
"   <div style='display:inline-block; cursor:pointer;' onclick = 'info.scclick(this)' onespt = '" + row.GZBH + "' class='delete' title='删除'><span class='iconfont icon-lajitong'></span></div>" +
"  <div style='display:inline-block; cursor:pointer;' data-toggle='modal' data-target='#exampleModalGZfile' onclick=openWindow('"+gzbh+"',2) class='file_manage' title='文件管理'>" +
"<span class='iconfont icon-wenjianjia' style='font-size:18px;'></span></div>"
}
}]
});
获取行参数进行编辑
var table = $('#gzTables').DataTable();
var rowData = table.row(index).data();//这样便可以获取到行值