Jquery Datatable （bootstrap -框架）

//首先，添加datatable控件的引用。
 <link href="~/Content/BootStrap/frontmcoinquery/bootstrap-table.css" rel="stylesheet" />
 <script src="~/Content/BootStrap/frontmcoinquery/bootstrap-table.js"></script> 
 <script src="~/Content/BootStrap/frontmcoinquery/bootstrap-table-zh-CN.js"></script>


//页面加载时 初始化 datatable 
 
 1 function loadEleList( ) {
var table = $("#dtEleList").dataTable(
{
"bProcessing" : true, 
"aLengthMenu" : [ 10, 15, 100 ],
"iDisplayLength" : 10,
"bPaginate": true, 
"bServerSide" : true,
"iCookieDuration": 0, 
"bScrollAutoCss": true, 
/* "sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true, */
"bDestroy" : true,
"bAutoWidth" : false,
"bFilter" : false,// 搜索栏
"bStateSave" : false,//状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容
"sPaginationType" : 'full_numbers', // default 'two_button' //分页显示 数字或者上下页按钮
"sAjaxSource" : "${ctx}/contract/eleMntlistData“, // 访问后台的控制层  返回json 数据 绑定到datatable
"aaSorting" : [ [ 2, "desc" ] ], //索引从0开始
"aoColumns" : [ {
"mDataProp" : 'id',
bSortable : false,
"mRender" : function(data, type, row) {
var conid=row.conid
return '<input type="checkbox" value="'+ row.id+ '" id="'+ row.id+ '" > ';
} 
},{
"mDataProp" : 'equRegCode',
bSortable : false
},
{
"mDataProp" : 'name',
"bVisible": false, 
"mRender": function ( data, type, row ) { /*type="text"*/
return '<input type="hidden" class="orgName" value="'+row.name+'"/>'; 
} ,
bSortable : false
}, 
{
"mDataProp" : 'contractId',
bSortable : false
}, {
"mDataProp" : 'contractName',
bSortable : false
},{ 
"mDataProp" : "id",
"mRender" : function(data, type, row) {
var str ="";
if(row.contractId !=null){
str = "<button onclick=\"deleteCont('"+row.conequid+"')\" class='btn btn-warning btn-sm' type='button'> 删除 </button>";
}else{
str = "<button class='btn btn-default btn-sm' type='button' disabled=''> 删除 </button>";
}
return str;
}, 
bSortable : false
} ],
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
$('td:eq(0)', nRow).attr('style','text-align: center;');
$('th:eq(0)').attr('style','text-align: center;'); 
$(nRow).on("click",function(){
var nclass = iDisplayIndex%2==1?"even":"odd";

if ($(nRow).attr("class")==nclass) {
$(nRow).removeClass(nclass);
$(nRow).addClass("alert-warning");
$(nRow).find("input[type='checkbox']").each(function() {
this.checked = true;
var eleId = $("#eleId").val()
if (eleId=="") {
$("#eleId").val(this.value);
}else{
$("#eleId").val(eleId+","+this.value);
}
});
}else{
$(nRow).removeClass("alert-warning");
$(nRow).addClass(nclass);
$(nRow).find("input[type='checkbox']").each(function() {
this.checked = false;
var eleId = $("#eleId").val();
var eleIds = eleId.split(",");
for (var i = 0; i < eleIds.length; i++) {
if (this.value==eleIds[i]) {
eleIds.splice(i,1);
}

}
$("#eleId").val(eleIds.join(","))
});
}

})

},
"fnDrawCallback" : function(oSettings) {
var eleId = $("#eleId").val();
var eleIds = eleId.split(",");
for (var i = 0; i < eleIds.length; i++) {
var id = eleIds[i];
$("#" + id + "").attr("checked", "");
$("#"+id+"").parent().parent().attr("class","alert-warning")
}
if ($(":checkbox:checked").length==1) {
$("input[type='checkbox']").each(function() {
this.checked = false;
});
} else if($(":checkbox:checked").length>1){
$("#allSelect").prop("checked",true);
}
deletehandle();
},
});
} 

 

 

1 以上部分是 jquery  datatable的数据绑定 ， 数据格式是后台传回来的 带分页的json 格式

 

 2 这部分是 表格的checkbox 全选和取消全选

var selectIds = [];  先定义一个数组 用来存储保存的选中的checkbox的id 
//var isCheckAll = false;
function swapCheck(obj) {
var isCheckAll = obj.checked;
if (isCheckAll==false) {
var idstr = $("#eleId").val();
var idss = idstr.split(",");
$("input[type='checkbox']").each(function() {
this.checked = false;
var trs=$("table#dtEleList tr"); 
var index=trs.index($(this).parent().parent().closest("tr")); 
if (index>0) {
$(this).parent().parent().attr("class",(index%2==1?"odd":"even"));
}
var no = $.inArray(this.value, idss);
if (no != -1) {
idss.splice(no, 1);
} 
var no1 = $.inArray(this.value, selectIds);
if (no1 != -1) {
selectIds.splice(no1, 1);
}


});
$("#eleId").val(idss.join(",")) 
//isCheckAll = false;
} else if(isCheckAll==true){

$("input[type='checkbox']").each(function() {
this.checked = true;
if (isNull($(this).parent().parent().attr("class"))!="") {
$(this).parent().parent().attr("class","alert-warning");
}
var index = $.inArray(this.value, selectIds);
;
if (index == -1) {
selectIds.push(this.value)
}
});
//$("#eleId").val("");
var id = selectIds.join(",")
if (id.startsWith(",")) {
id = id.substring(1, id.length + 1);
}
if (id.endsWith(",")) {
id = id.substring(0, id.length);
}
$("#eleId").val(id)
//isCheckAll = true;
}
}

 

 

 

 

以下是html 代码部分 主要是设置表格的标题

<div class="ibox float-e-margins">

<input type="hidden" id="eleId">
<div class="ibox-title">
<h5>电梯信息</h5>
</div>

<div class="ibox-content" style="padding-bottom: 50px">
<div id="mntEleListTable" style="overflow: hidden;overflow-x:auto;">
<table cellpadding="0" cellspacing="0" border="0" id="dtEleList"
style="width: 100%;table-layout:fixed;overflow :auto" >
<thead>
<tr>
<th width="5%" style="text-align: center;"><input
type="checkbox" value="" onclick="swapCheck(this)" id="allSelect"/></th> 
<th style="width: 15%;">设备注册代码</th>
<th style="width: 25%; display:none;">使用单位名称</th>
<th style="width: 20%;">合同编号</th>
<th style="width: 20%;">合同名称</th>
<th style="width: 8%;">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>