bootstrap-dataTable的使用
概述
官网：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 " + sbxh + "";
}
},
{"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 " + gzyy + "";
}
},
{
"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 " + gzwz + "";
}
},
{
"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 " + gjz + "";
}
},
{
"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 " + gzxx + "";
}
},
{
// 指定第四列，从0开始，0表示第一列，1表示第二列……
"width": "6%",
"targets": 15,
"render": function (data, type, row, meta) {
var rowIndex = meta.row;//获取到该行的rowIndex
var gzbh = row.GZBH;
return "" +
" " +
" +gzbh+"',2) class='file_manage' title='文件管理'>" +
""
}
}]
});获取行参数进行编辑
var table = $('#gzTables').DataTable();
var rowData = table.row(index).data();//这样便可以获取到行值