By

文章目录

一个基本的dataTable示例

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
 * 异步返回数据
 */
var loadActivitys = function () {
    //对layer.load的封装
    var layerIndex = blockScreen(20000, function () {
    });
    var handleAjaxData = function (ajaxData) {
        var res_code = ajaxData.res_code;
        var res_info = ajaxData.res_info;
        if (typeof res_code == "undefined") {
            alertError("请求错误！");
            return;
        }
        if (res_code == -1) {
            alertError(res_info);
            return;
        }
        //交给dataTable的数据源，数组列表
        var tableDataArray = [];
        if (res_code == 0) {
            $.each(ajaxData.res_data, function (i, obj) {
                //处理数据，形成一个字符串数组
                var objEle=[];
                tableDataArray.push(objEle);
            });
            $("#table").dataTable({
                "language": {
                    "url": "/static/datatable/Chinese.txt"
                },
                "data": tableDataArray,
                //绑定列
                "columns": [
                    {"title": "列1", "class": "center needCut", "width": "15%"},
                    {"title": "列2", "class": "center","width": "13%"},
                    {"title": "列3", "class": "center needCut","width": "10%"},
                    {"title": "列4", "class": "center needCut","width": "20%"}
                ],
                "initComplete": function () {
                    //初始化完成之后的方法调用
                    doAfter();
                },
                "autoWidth": false,
                //dataTable不允许多次初始化（即dataTable()方法），
                //这里设置每次初始化之前销毁,以方便处理，如果有纯客户端的
                //异步刷新表格局部操作不可以如此
                "destroy": true,
                //分页选项，dataTable的服务器模式默认将排序，分页搜索等操作全部提交到后台
                //不太灵活，一般自己分页就可以，充分利用客户端功能
                "pagingType": "full_numbers",//分页样式
                "pageLength": 25,//分页大小
                "searching": false,//是否显示搜索框，默认客户端搜索
                "paging": false,//自己分页
                "info": false//是否显示详细信息，"共多少项，当前显示XXX"
            });
            //处理分页
            var pageArgs=ajaxData.PAGE_ARGS;
            var pageCount=pageArgs.pageCount;
            var currentPage=pageArgs.currentPage;
            var pageRange=pageCount<20?pageCount:20;
            //这里使用layui的分页组件，简单实用
            lpage($("#pager"),pageCount,pageRange,currentPage,function(curr,first){
                //点击跳转执行的函数
                if(first){
                    //首次加载
                    return;
                }
            });
        }
        //layer.close的封装
        unBlockScreen(layerIndex);
    };
    
    //jquery.ajax的封装，将数据传给handleAjaxData函数
    ajaxCallback("xxxaction", $("#form").serialize(), "获取数据失败", handleAjaxData);
};
文章目录