自定义过滤/显示隐藏列

此例子为参加 Datatables中文网第一期交流学习活动 网友 逆风 提供的Demo
演示了在表头添加下拉框来过滤数据和添加自定义按钮来动态显示/隐藏指定的列( 另见
例子采用的是dom做为数据源,还实现了删除操作,checkbox多选/反选/全选

注意:大家可以根据此例子派生,实现自己项目中需要的效果

服务器名称 IP CPU/内存 数据盘大小 操作系统 状态
lsqtest 192.168.13.7 3核/1G 5G CentOS 56.5 运行中
lsqtdfest 192.168.136.56 1核/3G 3G
CentO核核核核核核核核核核核核核核核核核核核核核vS 53.5
已停止
lsfdqtest 192.165.13.56 1核/16G 2G CentOS 52.5 运行中
lsqtest 192.168.13.7 3核/1G 5G CentOS 56.5 运行中
lsqtdfest 192.18.136.56 1核/3G 13G CentOS 53.5 已停止
lsfdqtest 192.165.13.56 1核/16G 2G CntOS 52.5 运行中
lsqtest 192.168.13.7 3核/1G 5G CentOS 56.5 运行中
lsqtdfest 192.168.136.56 1核/3G 3G CentOS 53.5 已停止
aaaaaaaaaaaaaaaaaa 192.165.13.56 1核/16G 2G CentOS 52.5 运行中
bbbbbbbbbbbbbbbbbbbb 192.165.13.56 1核/16G 2G CentOS 52.5 运行中
 $(function () {

            var table = $('#example').DataTable({
                "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();
            });

            //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');
                }
            });

            //显示隐藏列
            $('.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());
            });

            //删除选中行
            $('#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();

            })

            //获取表格宽度赋值给右侧弹出层
            wt = $('.wt100').width();
            $('.showslider').css('right', -wt);

            //关闭右侧弹出层
            $('.closediv').click(function () {
                $(this).parent('.showslider').animate({
                    right: -wt
                }, 200)
                $('.clickdom').attr('isclick', true)
            });


        })

        //右侧弹出详情层
        /*  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)
            }

        }
    <div class="domab">
        <div class="" style="float:right;">
            <label>
                模糊查询:
                <input type="text" class="dsearch" placeholder="" aria-controls="example"></label>
        </div>

        <button id="button" style="float:left;">删除选中的行</button>
        <div style="float:left; position:relative; z-index:9999;height:100%;">
            <button class="showcol">列段显示/隐藏</button>
            <ul class="showul"
                style=" list-style:none;display:none; position:absolute; left:80px; top:10px; background:#FFFFFF; border:1px solid #ccc; width:200px;">
                <li>
                    <input type="checkbox" class="toggle-vis" data-column="2"/>
                    服务器名称
                </li>
                <li>
                    <input type="checkbox" class="toggle-vis" data-column="3"/>
                    IP
                </li>
                <li>
                    <input type="checkbox" class="toggle-vis" data-column="4"/>
                    CPU/内存
                </li>
                <li>
                    <input type="checkbox" class="toggle-vis" data-column="5"/>
                    数据盘大小
                </li>
                <li>
                    <input type="checkbox" class="toggle-vis" data-column="6"/>
                    操作系统
                </li>
                <li>
                    <input type="checkbox" class="toggle-vis" data-column="7"/>
                    状态
                </li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="wt100" style="position:relative; overflow:hidden; height:100%">
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th style=" width:1px; padding:0"></th>
                <th style="width:30px; padding:10px 0 10px 10px">
                    <input type="checkbox" id="checkAll"></th>
                <th>服务器名称</th>
                <th>IP</th>
                <th>CPU/内存</th>
                <th>数据盘大小</th>
                <th>操作系统</th>
                <th>状态</th>
            </tr>
            </thead>

            <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            </tfoot>
            <tbody>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtest</a>
                </td>
                <td>192.168.13.7</td>
                <td>3核/1G</td>
                <td>5G</td>
                <td>CentOS 56.5</td>
                <td>运行中</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtdfest</a>
                </td>
                <td>192.168.136.56</td>
                <td>1核/3G</td>
                <td>3G</td>
                <td>
                    <div style="height:21px; line-height:21px; overflow:hidden; width:100px;">CentO核核核核核核核核核核核核核核核核核核核核核vS
                        53.5
                    </div>
                </td>
                <td>已停止</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsfdqtest</a>
                </td>
                <td>192.165.13.56</td>
                <td>1核/16G</td>
                <td>2G</td>
                <td>CentOS 52.5</td>
                <td>运行中</td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtest</a>
                </td>
                <td>192.168.13.7</td>
                <td>3核/1G</td>
                <td>5G</td>
                <td>CentOS 56.5</td>
                <td>运行中</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtdfest</a>
                </td>
                <td>192.18.136.56</td>
                <td>1核/3G</td>
                <td>13G</td>
                <td>CentOS 53.5</td>
                <td>已停止</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsfdqtest</a>
                </td>
                <td>192.165.13.56</td>
                <td>1核/16G</td>
                <td>2G</td>
                <td>CntOS 52.5</td>
                <td>运行中</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtest</a>
                </td>
                <td>192.168.13.7</td>
                <td>3核/1G</td>
                <td>5G</td>
                <td>CentOS 56.5</td>
                <td>运行中</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtdfest</a>
                </td>
                <td>192.168.136.56</td>
                <td>1核/3G</td>
                <td>3G</td>
                <td>CentOS 53.5</td>
                <td>已停止</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">aaaaaaaaaaaaaaaaaa</a>
                </td>
                <td>192.165.13.56</td>
                <td>1核/16G</td>
                <td>2G</td>
                <td>CentOS 52.5</td>
                <td>运行中</td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="checkList"></td>
                <td>
                    <a class="clickdom" href="javascript:;" isclick="true"
                       onClick="clickDom(this);">bbbbbbbbbbbbbbbbbbbb</a>
                </td>
                <td>192.165.13.56</td>
                <td>1核/16G</td>
                <td>2G</td>
                <td>CentOS 52.5</td>
                <td>运行中</td>
            </tr>

            </tbody>
        </table>
        <div class="showslider">
            <button class="closediv">关闭</button>
        </div>
        <style>
            .showslider {
                width: 80%;
                height: 100%;
                background-color: #fff;
                border: 1px solid #ccc;
                position: absolute;
                top: 9px;
            }

            .addselect {
                border-radius: 2px;
                display: inline-block;
                background-color: #ccc;
                height: 12px;
                width: 16px;
                text-align: center;
                color: #fff;
                font-size: 9px;
                font-family: Arial;
                position: relative;
                margin-left: 4px;
                cursor: pointer;
                overflow: hidden;
                vertical-align: top;
                top: 1px;
            }

            .addselect select {
                width: 44px;
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                cursor: pointer;
            }

            table.dataTable tbody th, table.dataTable th, table.dataTable tbody td {
                font-size: 12px;
                text-align: left;
            }

            table.dataTable thead th {
                padding: 0 8px;
            }
        </style>
    </div>