datatalble總結（一）

基本配置信息

 "dom": '<"top"f >rt<"bottom"ilp><"clear">',//dom定位
            "dom": 'tiprl',//自定義顯示項
            //"dom":'<"domab"f>',
            "scrollY": "220px",//dt高度
            "lengthMenu": [
                [8, 6, 8, -1],
                [4, 6, 8, "All"]
            ],//每頁顯示條數設置
            "lengthChange": false,//是否允許用戶自定義顯示數量
            "bPaginate": true, //翻頁功能
            "bFilter": false, //列篩序功能
            "searching": true,//本地搜索
            "ordering": true, //排序功能
            "Info": true,//頁腳信息
            "autoWidth": true,//自動寬度
            "oLanguage": {//國際語言轉化
                "oAria": {
                    "sSortAscending": " - click/return to sort ascending",
                    "sSortDescending": " - click/return to sort descending"
                },
                "sLengthMenu": "顯示 _MENU_ 記錄",
                "sZeroRecords": "對不起，查詢不到任何相關數據",
                "sEmptyTable": "未有相關數據",
                "sLoadingRecords": "正在加載數據-請等待...",
                "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄。",
                "sInfoEmpty": "當前顯示0到0條，共0條記錄",
                "sInfoFiltered": "（數據庫中共爲 _MAX_ 條記錄）",
                "sProcessing": "<img src='../resources/user_share/row_details/select2-spinner.gif'/> 正在加載數據...",
                "sSearch": "模糊查詢：",
                "sUrl": "",
                //多語言配置文件，可將oLanguage的設置放在一個txt文件中，例：Javascript/datatable/dtCH.txt
                "oPaginate": {
                    "sFirst": "首頁",
                    "sPrevious": " 上一頁 ",
                    "sNext": " 下一頁 ",
                    "sLast": " 尾頁 "
                }
            },

            "columnDefs": [
                {
                    orderable: false,

                    targets: 0 },
                {
                    orderable: false,

                    targets: 1 }
            ],//第一列與第二列禁止排序

            "order": [
                [0, null]
            ],//第一列排序圖標改爲默認

列篩選

initComplete: function () {//列篩選
                var api = this.api();
                api.columns().indexes().flatten().each(function (i) {
                    if (i != 0 && i != 1) {//刪除第一列與第二列的篩選框
                        var column = api.column(i);
                        var $span = $('<span class="addselect">▾</span>').appendTo($(column.header()))
                        var select = $('<select><option value="">All</option></select>')
                                .appendTo($(column.header()))
                                .on('click', function (evt) {
                                    evt.stopPropagation();
                                    var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                    );
                                    column
                                            .search(val ? '^' + val + '$' : '', true, false)
                                            .draw();
                                });
                        column.data().unique().sort().each(function (d, j) {
                            function delHtmlTag(str) {
                                return str.replace(/<[^>]+>/g, "");//去掉html標籤
                            }

                            d = delHtmlTag(d)
                            select.append('<option value="' + d + '">' + d + '</option>')
                            $span.append(select)
                        });

                    }
                });

            }

添加索引列

table.on('order.dt search.dt',
                function () {
                    table.column(0, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each(function (cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }).draw();

自定義搜索

 $('.dsearch').on('keyup click', function () {
            var tsval = $(".dsearch").val()
            table.search(tsval, false, false).draw();
        });//.dsearch爲搜索框class值

實現checkbox全選

 $("#checkAll").on("click", function () {
            if ($(this).prop("checked") === true) {
                $("input[name='checkList']").prop("checked", $(this).prop("checked"));
                $('#example tbody tr').addClass('selected');
            } else {
                $("input[name='checkList']").prop("checked", false);
                $('#example tbody tr').removeClass('selected');
            }
        });//checkAll爲全選框ID；checkList爲每個選框的name值

顯示隱藏列

$('.toggle-vis').on('change', function (e) {
            e.preventDefault();
            console.log($(this).attr('data-column'));
            var column = table.column($(this).attr('data-column'));
            column.visible(!column.visible());
        });//toggle-vis爲表頭每個type爲checkbox的input的class值

刪除選中行

 $('#example tbody').on('click', 'tr input[name="checkList"]', function () {
            var $tr = $(this).parents('tr');
            $tr.toggleClass('selected');
            var $tmp = $('[name=checkList]:checkbox');
            $('#checkAll').prop('checked', $tmp.length == $tmp.filter(':checked').length);

        });

        $('#button').click(function () {
            table.row('.selected').remove().draw(false);
        });

        $('.showcol').click(function () {
            $('.showul').toggle();

        })//showcol列段顯示隱藏的class值

獲取表格寬度賦值給右側彈出層

 wt = $('.wt100').width();
        $('.showslider').css('right', -wt);
         //關閉右側彈出層
        $('.closediv').click(function () {
            $(this).parent('.showslider').animate({
                right: -wt
            }, 200)
            $('.clickdom').attr('isclick', true)
        });


    })//.wt100表格外層div的class值.showslider彈出層class值clickdom被點擊class值

右側彈出詳情層

var flag=false;
     function clickDom(obj){
     var  $par=$(obj).parents('#example_wrapper').siblings('.showslider')
     var  isattr=$(obj).attr('isclick');
     if(isattr=="true"){
     if(flag){
     $par.animate({
     right:-wt
     },200)
     flag=!flag
     }
     else{
     $par.animate({
     right:0
     },200)
     flag=!flag

     }
     }
     $('.clickdom').attr('isclick',false)
     $(obj).attr('isclick',true)


     }

右側點擊彈出層代碼

 function clickDom(obj) {
        var $par = $(obj).parents('#example_wrapper').siblings('.showslider')
        var isattr = $(obj).attr('isclick');
        if (isattr == "false") {

        } else {
            $par.animate({
                right: -wt
            }, 200)
            $par.animate({
                right: 0
            }, 400)
            $('.clickdom').attr('isclick', true)
            $(obj).attr('isclick', false)
        }

    }//showslider彈出層class