Jquery Datatables 请求参数及接收参数处理

Jquery Datatables 请求参数及接收参数处理

/**
 * Created by wb-wuyifu on 2016/8/9.
 */

/**
 * Created by wb-wuyifu on 2016/8/9.
 */

var $ = jQuery;

(function () {

    var App = function () {
        var self = this;

        self = $.extend(this, {

            api: {
                ajax_list: '*****'
                , url_monitor: '*****'
            },
            const:{
                gridIndex : 0,  // 表格索引序号
            },

            /**
             * 应用初始化
             */
            init: function () {
                self.initComponents();
            },

            /**
             *  组件初始化
             */
            initComponents: function () {

                // 初始化 表格
                self.jGrid = $("#searchGrid").DataTable({
                    ajax: {
                        url: self.api.ajax_list,

                        // 请求到的数据
                        dataSrc: function (data) {
                            // 请求到数据时 重置 索引号
                            self.const.gridIndex = 0;

                            $.extend(data, {
                                iTotalDisplayRecords: data.count,
                                iTotalRecords: data.count,
                            });

                            return data.rows;
                        },
                        dataType: 'json',
                        crossDomain: true,

                        // 延迟加载
                        deferRender: true,

                        // 提交参数
                        data: function (param) {

                            if (self.jGrid) {
                                param.pageSize = self.jGrid.page.len(); // 取得每页显示记录数返回给服务器
                            }

                            // 根据起始记录索引 重新计算页码
                            if(param.start){
                                param.pageNo = Math.ceil(param.start / (param.pageSize * 1.0)) + 1;
                            }else{
                                param.start = 1;
                            }

                            return param;
                        }
                    },
                    serverSide: true,
                    bServerSide :true,
                    ordering: false,
                    info: true,
                    lengthChange: true,
                    searching: false,
                    scrollCollapse: true,
                    pageLength: 30,
                    bAutoWidth: true,
                    stateSave :false,
                    // 自定义每页记录数 下拉菜单
                    lengthMenu: [
                        [10, 20, 30, 50, 100],
                        ['10', '20', '30', '50', '100']
                    ],
                    oLanguage: {
                        "sProcessing": "数据加载中……",
                        "sSearch": "快速检索:",
                        "sLengthMenu": "每页显示 _MENU_ 条",
                        "sInfo": "从 _START_ 到 _END_ 条，总共 _TOTAL_ 条记录",
                        "sZeroRecords": "没有记录",
                        "sInfoEmpty": "暂无记录",
                        "sInfoFiltered": "(一共有 _MAX_  条记录)",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": " 上一页 ",
                            "sNext": " 下一页 ",
                            "sLast": " 末页 "
                        }
                    },
                    columns: [
                        {
                            data: null,
                            defaultContent: '',
                            render: function (data, type, row) {
                                return ++self.const.gridIndex;
                            }
                        },
                        {
                            data: 'a',
                            defaultContent: ''
                        },
                        {
                            data: 'b',
                            defaultContent: ''

                        },
                        {
                            data: 'c',
                            defaultContent: ''

                        },
                        {
                            data: 'd',
                            defaultContent: ''

                        },
                        {
                            data: 'e',
                            render: function (data, type, row) {
                                var display = [
                                    row.a
                                    , ' / '
                                    , row.b
                                    , ' / <br/>'
                                    , row.c
                                ].join('');
                                return display;
                            },
                        },

                    ]
                });

            }

        });

        self.init();

    }.call();

})();