zoukankan      html  css  js  c++  java
  • 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();
    
    })();
    
    
    
    
  • 相关阅读:
    SERU最佳需求分析方法
    需求规格说明书(Volere版)
    开发设计模式之设计六大原则
    清晰、高效、一致、美观 – 关于设计原则的优先级排序
    一个案例,三个角色,简单说下B端产品的权限设计
    如何从0到1打造一个完美的业务系统?
    MarkdownPad2.5 注册码
    WEBSTORM快捷键
    jQuery
    BOM与DOM
  • 原文地址:https://www.cnblogs.com/wuyifu/p/5755624.html
Copyright © 2011-2022 走看看