datatalble总结（一）_c# 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]
            ],//第一列排序图标改为默认
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

列筛选

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

                    }
                });

            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

添加索引列

table.on('order.dt search.dt',
                function () {
                    table.column(0, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each(function (cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }).draw();
1
2
3
4
5
6
7
8
9

自定义搜索

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

实现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值
1
2
3
4
5
6
7
8
9
10

显示隐藏列

$('.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值
1
2
3
4
5
6

删除选中行

 $('#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值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

获取表格宽度赋值给右侧弹出层

 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值
1
2
3
4
5
6
7
8
9
10
11
12

右侧弹出详情层

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)


     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

右侧点击弹出层代码

 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17