datatables分页及跳转

Posted 2020-12-05 luoxianwei

 

html代码：

<table style="text-align: center;" id="accountSwitchTable" class="table table-bordered table-striped">
     <colgroup>
        <col width="15%">
        <col width="15%">
        <col width="15%">
        <col width="20%">
        <col width="15%">
        <col width="10%">
     </colgroup>
     <thead>
       <tr>
         <th style="text-align: center;">合作伙伴</th>
         <th style="text-align: center;">账单号</th>
         <th style="text-align: center;">账单生成时间</th>
         <th style="text-align: center;">创建人机构</th>
         <th style="text-align: center;">创建人</th>
         <th style="text-align: center;">账单金额</th>
        </tr>
     </thead>
     <tbody>
     </tbody>
</table>

js代码：

var accountSwitch = {}
accountSwitch.init = function () {
}
accountSwitch.init.prototype = {
    initTable: function () {
        $(‘#accountSwitchTable‘).DataTable({
            "sPaginationType": "full_numbers",//设置分页控件的模式
            "bPaginate": true, //翻页功能
            "bLengthChange": false, //改变每页显示数据数量
            "bFilter": false, //过滤功能
            "bSort": false, //排序功能
            "bInfo": true,//页脚信息
            "bAutoWidth": true,//自动宽度
            "stateSave": true,//设置缓存页页码数据
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                },
                "sZeroRecords": "没有检索到数据",
                "sProcessing": "<img src=‘./loading.gif‘ />",
                "sSearch": "搜索"
            },
            ordering: false,
            "aaSorting": [
                [4, "desc"]
            ],
            "sDom": ‘rt<"row"<"col-xs-2a"i><"col-xs-8a"p><"col-xs-2b"l>>‘,//自定义布局
            "aaSorting": [2, ‘asc‘],//按用户指定的列排序
            "bSort": false,// 排序
            "bStateSave": false,//.状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容：
            "bJQueryUI": true,
            "bPaginate": true,// 分页按钮
            "bFilter": false,// 搜索栏
            "bLengthChange": true,// 每行显示记录数
            "aLengthMenu": [5, 10, 20, 50, 100, 200], //更改显示记录数选项
            "iDisplayLength": 10,// 每页显示行数 "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
            "bInfo": true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
            "bWidth": true,
            "bScrollCollapse": true,
            "sPaginationType": "full_numbers", // 分页，一共两种样式,一种full_numbers 另一种为two_button // 是datatables默认
            //  "bProcessing" : true,
            "bServerSide": true,
            "bDestroy": true,
            "bSortCellsTop": true,
            "sAjaxSource": STATIC_CTX + "/accountSwitch/accountSwitch",
            //  "sScrollY": "100%",
            "fnInitComplete": function () {
                this.fnAdjustColumnSizing(true);
            },
            "fnDrawCallback": function (table) {
                //指定跳转页面
                $("#accountSwitchTable_paginate").append("<input  class=‘margin text-center paginput pipt‘ id=‘changePage‘ type=‘text‘> 页  <a class=‘btn btn-default shiny pagbtn‘ style=‘margin-bottom:5px‘ href=‘javascript:void(0);‘ id=‘dataTable-btn‘>跳转</a>");
                var oTable = $("#accountSwitchTable").dataTable();
                $(‘#dataTable-btn‘).click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    oTable.fnPageChange(redirectpage);
                });
            },
            /* "fnServerParams": function (aoData) {
               },*/
            "aoColumns": [
                {
                    "data": "souceCode",
                    "render": function (data) {
                        if (data == null) {
                            return "";
                        } else if (data == ‘unigift‘) {
                            return ‘工会礼包‘;
                        } else if (data == ‘direct‘) {
                            return ‘集采系统‘;
                        }
                    }
                },
                {
                    "data": "orderNo",
                    "render": function (data) {
                        if (data == null) {
                            return "";
                        } else {
                            return data;
                        }
                    }
                },
                {
                    "data": "billsTime",
                    "render": function (data) {
                        if (data == null) {
                            return "";
                        } else {
                            return data;
                        }
                    }
                },
                {
                    "data": "parentCompany",
                    "render": function (data) {
                        if (data == null) {
                            return "";
                        } else {
                            return data;
                        }
                    }
                },
                {
                    "data": "realName",
                    "render": function (data) {
                        if (data == null) {
                            return "";
                        } else {
                            return data;
                        }
                    }
                },
                {
                    "data": "price",
                    "render": function (data) {
                        if (data == null) {
                            return "";
                        } else {
                            return data;
                        }
                    }
                }
            ],
            "fnServerData": function (sSource, aoData, fnCallback) {
                var serializeData = function (aoData) {
                    var data = {};
                    for (var i = 0; i < aoData.length; i++) {
                        var dd = aoData[i];
                        if (dd[‘value‘]) {
                            data[dd[‘name‘]] = dd[‘value‘];
                        }
                    }
                    return $.param(data);
                };

                $.ajax({
                    "type": ‘post‘,
                    "url": sSource,
                    "data": serializeData(aoData),
                    "success": function (resp) {
                        fnCallback(resp);
                        var total = $("td");
                        if (total.size() < 2 && searchFlag) {
                            // window.wxc.xcConfirm("很抱歉，系统找不到您的记录，请换个条件试试！", "info");
                        }
                    }
                });
            }
        });
    }
}
$(function () {
    var obj = new accountSwitch.init();
    obj.initTable();
})