zoukankan      html  css  js  c++  java
  • 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="'+$(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>
  • 相关阅读:
    福建省队集训被虐记——DAY1
    bzoj1755 [Usaco2005 qua]Bank Interest
    bzoj1754 [Usaco2005 qua]Bull Math
    bzoj1753 [Usaco2005 qua]Who's in the Middle
    wikioi1369 xth 砍树
    wikioi1191 数轴染色
    bzoj1189 [HNOI2007]紧急疏散evacuate
    POJ 3734 Blocks(矩阵快速幂+矩阵递推式)
    斐波那契+大数相加
    矩阵的快速幂
  • 原文地址:https://www.cnblogs.com/Youngly/p/4729367.html
Copyright © 2011-2022 走看看