datatable 添加全选功能
1 <table class='data-table table table-bordered table-striped table-hover' style='margin-bottom:0;'> 2 </table>
<script> var rowCkArr=new Array(); var ckAll = 0; $(document).ready(function(){ var table = setDataTable($(".data-table")); //过滤 $('.data-table').append($('<tfoot><tr></tr></tfoot>')); $('.data-table thead th').each( function () { var title = $('.data-table thead th').eq( $(this).index() ).text(); th = $('<th></th>'); $('.data-table tfoot tr').append(th); th.html( '<input type="text" placeholder="'+title+'" style="width:'+$(this).width()+'px;" />' ); } ); //插入全选checkbox $(".data-table").find('thead tr th:first-child') .prepend('<input type="checkbox" value="" id="chk_all" style="padding:3px;margin-right:5px;" />'); $("#chk_all").click(function(){ if(ckAll==0){ $('.data-table tr td .rowCkbox').each(function(){ if($(this).attr("ckIF")==0){ $(this).attr("checked",'true'); $(this).attr("ckIF",1); rowCkArr.push($(this).attr('dataTD')); } }); $('#chk_all').attr("checked",'true'); ckAll = 1; }else if(ckAll==1){ $('.data-table tr td .rowCkbox').each(function(){ $(this).removeAttr("checked"); $(this).attr("ckIF",0); }); rowCkArr = new Array() ; ckAll = 0; $('#chk_all').removeAttr("checked"); } $(this).val(ckAll); alert("rowCkArr="+rowCkArr); }); $("tfoot input").each(function(i){ $(this).on('keyup change', function () { table.columns(i).search( this.value ); } ); $(this).keydown(function(e){ if(e.keyCode==13){ table.columns(i).draw(); } } ); }); //表格隔行变色 $('.data-table tbody').on('click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); }); //筛选表格 this.setDataTable = function(selector) { return selector.DataTable({ aLengthMenu: [5,10] ,iDisplayLength:5 ,sDom: "<'row-fluid'<'span6'l><'span6 text-right'f>r>t<'row-fluid'<'span6'i><'span6 text-right'p>>" ,sPaginationType: "bootstrap" ,oLanguage: { sProcessing: "处理中...", sLengthMenu: "显示_MENU_ 项结果", sZeroRecords: "没有匹配结果", sInfo: "显示第_START_ 至_END_ 项结果,共_TOTAL_ 项", sInfoEmpty: "显示第0 至0 项结果,共0 项", sInfoFiltered: "(由_MAX_项结果过滤)", sSearch: "搜索:", oPaginate: {"sNext": "下一页","sPrevious": "上一页"} } ,sAjaxSource: "admin_toShowEntBonus" ,bServerSide:true ,bFilter: true //过滤功能 ,bSort: false //标题 ,fnServerData : function(sSource, aoData, fnCallback){ $.ajax( { "type": "get", "contentType": "application/json", "url": sSource, "dataType": "json", "data": { 'aoData': JSON.stringify(aoData) }, // 以json格式传递 "success": function(resp) { fnCallback(resp); } }); } ,aoColumns: [ { "mData": "id",'title':'ID',"bVisible":false} ,{ "mData": "id",'title':'全选', "mRender":function(data,type,row){
//在这里做绑定事件时,页面进行table.draw()时,无法绑定。因为第一次画table时执行了两次,draw时执行一次。 return '<input type="checkbox" onclick="rowCkboxClick(this);" ckIF = 0 class="rowCkbox" dataTD='+data+' />'; }} ,{ "mData": "orderEntName",'title':'企业名称'} ,{ "mData": "orderCode",'title':'订单编号'} ,{ "mData": "orderGenerateDate",'title':'下单时间'} ,{ "mData": "perVal",'title':'返利面值(¥)'} ] }); };
//onClick事件执行函数,调用input:checkbox本身执行事件 function rowCkboxClick(e){
if($(e).attr("ckIF")==1){
$(e).removeAttr("checked");
for(var i=0;i<rowCkArr.length;i++){
if(rowCkArr[i]==$(e).attr('dataTD')){
temp = rowCkArr[i];
rowCkArr[i] = rowCkArr[0];
rowCkArr[0] = temp;
rowCkArr.shift();
}
}
$('#chk_all').removeAttr("checked");
ckAll = 0;
$(e).attr("ckIF",0);
}else{
$(e).attr("checked",'true');
$(e).attr("ckIF",1);
rowCkArr.push($(e).attr('dataTD'));
var ckFlag = true;
$('.data-table tr td .rowCkbox').each(function(){
if($(this).attr("ckIF")==0){
ckFlag = false;
}
});
if(ckFlag){
$('#chk_all').attr("checked",'true');
ckAll=1;
}
}
$("#chk_all").val(ckAll);
} </script>