datatables.js中文项目使用案例

祝福纱雾荼梻

已于 2023-05-04 10:09:44 修改

阅读量1.1k

点赞数

分类专栏：前端插件实战文章标签： datatable.js bootstrap jquery Powered by 金山文档

于 2023-03-10 17:30:26 首次发布

本文链接：https://blog.csdn.net/weixin_41355260/article/details/129445377

版权

前端插件实战专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官方下载地址

https://datatables.net/download/

中文官网：http://datatables.club/

资源引用

<link href="~/datatables/datatables.min.css" rel="stylesheet" />
<script src="~/jquery.min.js" type="text/javascript"></script>
<script src="~/datatables/datatables.min.js" type="text/javascript"></script>

汉化

注意：需在初始化之前对datatable进行扩展

//datatable汉化
// oSort是排序类型数组, 'chinese-asc'是自己定义的类型的排序(*-asc || *-desc)名称
// 插件应该会根据表格中的内容的类型(string, number, chinese)进行比较排序，
// 如果以chinese类型来排序则用oSort['chinese-asc']和oSort['chinese-desc']的方法
// oSort对应的function里面自定义比较方法
jQuery.fn.dataTableExt.oSort['chinese-asc'] = function (x, y) {
    //javascript自带的中文比较函数，具体用法可自行查阅了解
    return x.localeCompare(y);
};

jQuery.fn.dataTableExt.oSort['chinese-desc'] = function (x, y) {
    return y.localeCompare(x);
};

// aTypes是插件存放表格内容类型的数组
// reg赋值的正则表达式，用来判断是否是中文字符
// 返回值push到aTypes数组，排序时扫描该数组，'chinese'则调用上面两个方法。返回null默认是'string'
jQuery.fn.dataTableExt.aTypes.push(function (sData) {
    var reg = /^[\u4e00-\u9fa5]{0,}$/;
    if (reg.test(sData)) {
        return 'chinese';
    }
    return null;
});

汉化语言包 Chinese.txt：若中文乱码，则需要使用记事本等工具另存为->更改文件编码方式为UTF-8

{
    "processing": "处理中...",
    "lengthMenu": "显示 _MENU_ 项结果",
    "zeroRecords": "没有匹配结果",
    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
    "infoFiltered": "(由 _MAX_ 项结果过滤)",
    "infoPostFix": "",
    "search": "搜索:",
    "searchPlaceholder": "搜索...",
    "url": "",
    "emptyTable": "表中数据为空",
    "loadingRecords": "载入中...",
    "infoThousands": ",",
    "paginate": {
        "first": "首页",
        "previous": "上页",
        "next": "下页",
        "last": "末页"
    },
    "aria": {
        "paginate": {
            "first": "首页",
            "previous": "上页",
            "next": "下页",
            "last": "末页"
        },
        "sortAscending": "以升序排列此列",
        "sortDescending": "以降序排列此列"
    },
    "thousands": "."
}

初始化

HTMl

<table class="datatable table table-stripped no-footer" id="dataTable1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>职位</th>
            <th>国籍</th>
            <th>服务时长</th>
            <th>日期</th>
            <th>薪资</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>姓名</td>
            <td>职位</td>
            <td>国籍</td>
            <td>服务时长</td>
            <td>日期</td>
            <td>薪资</td>
            <td>操作</td>
        </tr>
    </tbody>
</table>

JS

$(function(){
    //datatable初始化
    function initDataTable() {
        if ($(".datatable").length > 0) {
            var mytable = $(".datatable").DataTable({
                //汉化方式一
                "language": {
                    "url": "../../lib/datatables/Chinese.txt",//汉化
                    "charset": "utf8"//指定编码字符，若无效，参考注释一
                },
                //汉化方式二
                "language":{  
                    "processing": "处理中...",
                    "lengthMenu": "显示 _MENU_ 项结果",
                    "zeroRecords": "没有匹配结果",
                    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "infoFiltered": "(由 _MAX_ 项结果过滤)",
                    "infoPostFix": "",
                    "search": "搜索:",
                    "searchPlaceholder": "搜索...",
                    "url": "",
                    "emptyTable": "表中数据为空",
                    "loadingRecords": "载入中...",
                    "infoThousands": ",",
                    "paginate": {
                        "first": "首页",
                        "previous": "上页",
                        "next": "下页",
                        "last": "末页"
                    },
                    "aria": {
                        "paginate": {
                            "first": "首页",
                            "previous": "上页",
                            "next": "下页",
                            "last": "末页"
                        },
                        "sortAscending": "以升序排列此列",
                        "sortDescending": "以降序排列此列"
                    },
                    "thousands": "."
                },
                ajax: '../../mydatatable.json',
                scrollX: false,
                bAutoWidth: true,
                columns: [
                    { data: 'name' },
                    { data: 'position', orderable: false },
                    { data: 'office', orderable: false },
                    { data: 'extn' },
                    { data: 'startDate' },
                    { data: 'salary' },
                    {
                        data: null,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            // row参数里面包含了本行的信息
                            // meta 单元格的元数据， row,col的索引号
                            //动态输出每行操作按钮
                            var btnHtml = [], str;
                            for (var i = 1; i < row.btn.length; i++) {
                                str = '<li><a class="' + row.btn[i].class + '" data-myid="' + row.id + '"><i class="' + row.btn[i].icon + '"></i>' + row.btn[i].name + '</a></li>'
                                btnHtml.push(str);
                            }
                            html = '<a type="button" class="dropdown-toggle btn-actions" data-toggle="dropdown" href="#">'
                                + '<i class="fa fa-ellipsis-vertical"></i>'
                                + '</a > '
                                + '<ul class="dropdown-menu btn-tablemore-list">'
                                + btnHtml.join("")
                                + '</ul>'
                            return html;
                        }
                    }
                ],
                order: [//排序
                    [0, 'asc']
                ]
            });
        }
    }
});

mydatatable.json

{
  "data": [
    {
      "name": "张高级",
      "id": "1",
      "position": "区域主任",
      "office": "洛杉矶",
      "extn": "5421",
      "startDate": "2011/04/25",
      "salary": "$320,800",
      "btn": [
        {
          "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
          "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "fas fa-eye",
          "name": "查看",
          "class": "btn-detail text-warning"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "张三",
      "id": "2",
      "position": "营销设计师",
      "office": "东京",
      "extn": "8422",
      "startDate": "2011/07/25",
      "salary": "$170,750",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "傅慎行",
      "id": "3",
      "position": "Javascript 软件工程师",
      "office": "洛杉矶",
      "extn": "1562",
      "startDate": "2009/01/12",
      "salary": "$86,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "欧茉莉",
      "id": "4",
      "position": "软件工程师",
      "office": "爱丁堡",
      "extn": "6224",
      "startDate": "2012/03/29",
      "salary": "$433,060",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "乔钻石",
      "id": "5",
      "position": "区域主任",
      "office": "伦敦",
      "extn": "5407",
      "startDate": "2008/11/28",
      "salary": "$162,700",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "蓉貌好",
      "id": "6",
      "position": "首席营销官",
      "office": "纽约",
      "extn": "4804",
      "startDate": "2012/12/02",
      "salary": "$372,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "白读书",
      "id": "7",
      "position": "系统架构师",
      "office": "洛杉矶",
      "extn": "9608",
      "startDate": "2012/08/06",
      "salary": "$137,500",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "戚折",
      "id": "8",
      "position": "人事主管",
      "office": "伦敦",
      "extn": "6200",
      "startDate": "2010/10/14",
      "salary": "$327,900",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "何呵呵",
      "id": "9",
      "position": "首席运营官",
      "office": "伦敦",
      "extn": "2360",
      "startDate": "2009/09/15",
      "salary": "$205,500",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "蒲渔",
      "id": "10",
      "position": "开发人员",
      "office": "伦敦",
      "extn": "1667",
      "startDate": "2008/12/13",
      "salary": "$103,600",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "赵默笙",
      "id": "11",
      "position": "摄影师",
      "office": "纽约",
      "extn": "3814",
      "startDate": "2008/12/19",
      "salary": "$90,560",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "何以琛",
      "id": "12",
      "position": "律师",
      "office": "旧金山",
      "extn": "9497",
      "startDate": "2013/03/03",
      "salary": "$342,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "甄可以",
      "id": "13",
      "position": "高级营销设计师",
      "office": "伦敦",
      "extn": "6741",
      "startDate": "2008/10/16",
      "salary": "$470,600",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "高启兰",
      "id": "14",
      "position": "医生",
      "office": "爱丁堡",
      "extn": "3597",
      "startDate": "2012/12/18",
      "salary": "$313,500",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "撒挨踢",
      "id": "15",
      "position": "开发主管",
      "office": "纽约",
      "extn": "1965",
      "startDate": "2010/03/17",
      "salary": "$385,750",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "大天师",
      "id": "16",
      "position": "首席运营官",
      "office": "纽约",
      "extn": "1581",
      "startDate": "2012/11/27",
      "salary": "$198,500",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "安欣",
      "id": "17",
      "position": "售前支持",
      "office": "纽约",
      "extn": "3059",
      "startDate": "2010/06/09",
      "salary": "$725,000",
      "btn": [
        {
          "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
          "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "fas fa-eye",
          "name": "查看详情",
          "class": "btn-detail text-warning"
        },

        {
          "icon": "fas fa-share",
          "name": "转发",
          "class": "btn-share"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "李承鄞",
      "id": "18",
      "position": "集成专家",
      "office": "悉尼",
      "extn": "1721",
      "startDate": "2009/04/10",
      "salary": "$237,500",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "王八卦",
      "id": "19",
      "position": "首席执行官",
      "office": "伦敦",
      "extn": "2558",
      "startDate": "2012/10/13",
      "salary": "$132,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "大膜王",
      "id": "20",
      "position": "软件工程师",
      "office": "爱丁堡",
      "extn": "2290",
      "startDate": "2012/09/26",
      "salary": "$217,500",
      "btn": [
        {
          "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "李泽言",
      "id": "21",
      "position": "初级技术作者",
      "office": "加拿大",
      "extn": "1937",
      "startDate": "2011/09/03",
      "salary": "$345,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "魏什么",
      "id": "22",
      "position": "售前支持",
      "office": "洛杉矶",
      "extn": "6154",
      "startDate": "2009/06/25",
      "salary": "$675,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "欧活泼",
      "id": "23",
      "position": "软件工程师",
      "office": "洛杉矶",
      "extn": "8330",
      "startDate": "2011/12/12",
      "salary": "$106,450",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "买辣椒也用券",
      "id": "24",
      "position": "售前支持",
      "office": "东京",
      "extn": "3023",
      "startDate": "2010/09/20",
      "salary": "$85,600",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "要不要买菜",
      "id": "25",
      "position": "会计",
      "office": "东京",
      "extn": "5797",
      "startDate": "2009/10/09",
      "salary": "$20,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete btn-red"
        }
      ]
    },
    {
      "name": "勋悟空",
      "id": "26",
      "position": "首席执行官",
      "office": "伦敦",
      "extn": "8822",
      "startDate": "2010/12/22",
      "salary": "$92,575",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "何猜想",
      "id": "27",
      "position": "初级技术作者",
      "office": "旧金山",
      "extn": "9239",
      "startDate": "2010/11/14",
      "salary": "$357,650",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "撒德巴",
      "id": "28",
      "position": "软件工程师",
      "office": "旧金山",
      "extn": "1314",
      "startDate": "2011/06/07",
      "salary": "$206,850",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "撒微笑",
      "id": "29",
      "position": "代言人",
      "office": "旧金山",
      "extn": "2947",
      "startDate": "2010/03/11",
      "salary": "$850,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    },
    {
      "name": "许红豆",
      "id": "30",
      "position": "区域经理",
      "office": "上海",
      "extn": "8899",
      "startDate": "2011/08/14",
      "salary": "$163,000",
      "btn": [
        {
           "icon": "fa fa-edit",
          "name": "",
          "class": "btn-edit text-success"
        },
        {
           "icon": "fa fa-edit",
          "name": "编辑",
          "class": "btn-edit text-success"
        },
        {
          "icon": "far fa-trash-alt",
          "name": "删除",
          "class": "btn-delete text-danger"
        }
      ]
    }
  ]
}

ajax即时自动更新数据

需求描述：定时向服务器端发起请求获取数据，若数据有变更，自动局部刷新datatable 并保存滚动条位置

//param1:#tableid
//param2:数据
//param3:刷新之前的滚动条偏移量
function refreshTable(tableId, data, scrollLength) {
    var table = $(tableId).dataTable();
    var oSettings = table.fnSettings();//获取table的配置
    //bootstrap的tooltip插件，不执行此操作会导致刷新前的tooltip一直停留在网页
    if ($('[data-toggle="tooltip"]').length > 0) {
        $('[data-toggle="tooltip"]').tooltip('hide');
    }
    table.fnClearTable(this); //动态刷新关键部分语句，只会根据后台数据有变化才会刷新
    for (var i = 0; i < data.length; i++) {
        table.oApi._fnAddData(oSettings, data[i]); //注意取得的json串的字符数量，要与html中列的数量要有对应
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw(false);
    $(tableId).closest(".dataTables_scrollBody").scrollTop(scrollLength); //滚动到指定行位置 
}

var myInter = self.setInterval(function () {
    var scrollLength = $('#dataTable1').closest(".dataTables_scrollBody").scrollTop();
    $.ajax({
        url: getUncachedUrl('/YWPT/test/all1'),
        type: 'POST',
        success: function (data) {
            refreshTable('#dataTable1', data.data, scrollLength);
        }
    });
}, 5000);