引入
../../../../media/css/jquery.dataTables.css
../../css/scroller.dataTables.css
https://code.jquery.com/jquery-3.3.1.js
../../../../media/js/jquery.dataTables.js
../../js/dataTables.scroller.js
function getDgBgshTable(){
sjxmFwTable = $('#sjxmFwTable').DataTable({
destroy : true,
serverSide : true,
paging : true,
dom: "frtiS",
scrollX: true,
scrollY: 246,
scroller: {
loadingIndicator: true
},
responsive : true,
processing : true,
autoWidth : false,// 自动计算列宽
deferRender : true,// 设置延迟渲染,提高效率用
draw : false,
searching: false,
bLengthChange: false,
order : [ 1, 'asc' ],
ajax : {
url : "sjxm2/getSjfw",
type : "POST",
data : function(d) {
var sentJson = GET_SENT_JSON(d);
sentJson.search1 = sjxmglArr[0].sjxmdm; //sjxmdm
sentJson.search2 = $('#text_xmbh').val();//xmbh
sentJson.search3 = $('#text_bmbh').val();//bmbh
return sentJson;
},
error : function(e) {
ALERT_ERROR(sjxmFwTable, e);
},
},
lengthMenu : PAGELENGTH,
"language" : LANGUAGESETTING,
columnDefs : [
{ "targets": 0 ,"name":"bmbh" ,"title": " <a><i class='fa fa-circle selectAll_bgdg'></a></i><a><i class='fa fa-circle-o QselectAll_bgdg'></a>", "width": "2%","orderable" : false,},
{ "targets": 1 ,"name":"bmbh" ,"title": "部门编号", "visible": true,"width": "2%", orderable:false,},
{ "targets": 2 ,"name":"bmmc","title": "部门名称" ,"visible": true,"width": "16%" ,orderable :true ,},
{ "targets": 3 ,"name":"xmbh","title": "项目编号" ,"visible": true,"width": "20%" , orderable :false ,},
{ "targets": 4 ,"name":"xmmc","title": "项目名称" ,"visible": true,"width": "20%" , orderable :false ,},
],
columns: [
{
"sClass": "text-center",
"data": "bmbh",
"render": function (data, type, row, meta) {
return '<input type="checkbox" class="checkchild_bgdg" value="' + data + '" name="childBox"/>';
},
},
{data: 'bmbh'},
{data: 'bmmc'},
{data: 'xmbh'},
{data: 'xmmc'},
],
});
//鼠标移动添加背景颜色
mouseEvent("sjxmFwTable");
};
var handleCheckbox = function() {
$(".selectAll_bgdg").click(function () {
var bgdg_data = $(sjxmFwTable).context[0].aoData;
for(var i = 0 ; i < bgdg_data.length ; i++) {
//判断是否延迟渲染
if(bgdg_data[i].anCells != null) {
//没有勾选的场合
if(!bgdg_data[i].anCells[0].firstChild.checked) {
bgdg_orderArr.push(bgdg_data[i]._aData);
}
}
}
$(".checkchild_bgdg").prop("checked", true);
});
$(".QselectAll_bgdg").click(function () {
var bgdg_data = $(sjxmFwTable).context[0].aoData;
for(var i = 0 ; i < bgdg_data.length ; i++) {
//判断是否延迟渲染
if(bgdg_data[i].anCells != null) {
//勾选的场合
if(bgdg_data[i].anCells[0].firstChild.checked) {
var xmbh = bgdg_data[i]._aData.xmbh;
for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
if(xmbh == bgdg_orderArr[m].xmbh) {
bgdg_orderArr.splice(m, 1);
}
}
}
}
}
$(".checkchild_bgdg").prop("checked", false);
});
sjxmFwTable.off("click").on( 'click', '.checkchild_bgdg', function (e) {
var checked = $(this).is(":checked");
nRow = $(this).parents('tr')[0];
var nData = sjxmFwTable.row( nRow ).data();
if (checked) {
bgdg_orderArr.push(nData);
} else {
var xmbh = nData.xmbh;
for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
if(xmbh == bgdg_orderArr[m].xmbh) {
bgdg_orderArr.splice(m, 1);
}
}
}
});
}
列表刷新 sjxmFwTable.ajax.reload();
带滚轴时表头会产生错位,需要刷新
setTimeout(function(){
sjxmFwTable.ajax.reload();
},200);