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" οnclick="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>

 

转载于:https://www.cnblogs.com/Youngly/p/4729367.html