首页 > 其他 > 详细

datatable 添加全选功能

时间:2015-08-14 13:19:34      阅读:493      评论:0      收藏:0      [点我收藏+]
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){
                                   $("#rowCkbox"+data).change(function(){
                                        
                                        if($(this).attr("ckIF")==1){
                                            $(this).removeAttr("checked");    
                                            for(var i=0;i<rowCkArr.length;i++){
                                                if(rowCkArr[i]==$(this).attr(‘dataTD‘)){
                                                    temp = rowCkArr[i];
                                                    rowCkArr[i] = rowCkArr[0];
                                                    rowCkArr[0] = temp;
                                                    rowCkArr.shift();
                                                }                                                    
                                            }                                            
                                            $(‘#chk_all‘).removeAttr("checked");
                                            ckAll = 0;
                                            $(this).attr("ckIF",0);
                                        }else{
                                            $(this).attr("checked",‘true‘);
                                            $(this).attr("ckIF",1);                                            
                                            rowCkArr.push($(this).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);
                                        alert("rowCkArr="+rowCkArr);
                                        
                                    });
                                    return ‘<input type="checkbox" ckIF = 0 class="rowCkbox" id="rowCkbox‘+data+‘" dataTD=‘+data+‘ />‘;
                                  }}                        
                          ,{ "mData": "orderEntName",‘title‘:‘企业名称‘}
                          ,{ "mData": "orderCode",‘title‘:‘订单编号‘}
                          ,{ "mData": "orderGenerateDate",‘title‘:‘下单时间‘}
                          ,{ "mData": "perVal",‘title‘:‘返利面值(¥)‘}  
                      ] 
             
             
        });
    };
  
</script>

 

datatable 添加全选功能

原文:http://www.cnblogs.com/Youngly/p/4729367.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!