datatables 封装 post传参

封装

var Hf_DataTable = function () {
    /* 全选以及选中效果功能  */
    function checkAll(table) {
        //全选功能
        table.find('.checkall').change(function () {
            var allCheck = table.find('tbody input[type=checkbox]');
            if (jQuery(this).is(":checked")) {
                allCheck.each(function () {
                    jQuery(this).attr('checked', true);
                    jQuery(this).parent().addClass('checked');    
                });
            } else {
                allCheck.each(function () {
                    jQuery(this).attr('checked', false);
                    jQuery(this).parent().removeClass('checked');    
                });
            }
        });
        //选中效果
        table.on('change', 'tbody tr .check', function () {
            $(this).parents('tr').toggleClass("active");
            if (jQuery(this).is(":checked")) {
                jQuery(this).attr('checked', true);
                jQuery(this).parent().addClass('checked');
            } else {
                jQuery(this).attr('checked', false);
                jQuery(this).parent().removeClass('checked');
            }
        });       
    }  
    var DataTablePublic = {
        //理静态数据 
        baseTable: function (table) {
            var oTable = table.dataTable({
                'lengthMenu': [5, 10, 15, 20, 25],//每一页显示个数
                'searching': false,
                'language': {
                    sLengthMenu: "每页显示 _MENU_ 条记录",
                    sZeroRecords: "对不起,查询不到任何相关数据",
                    sInfo: "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                    sInfoEmtpy: "找不到相关数据",
                    sInfoFiltered: "数据表中共为 _MAX_ 条记录",
                    sProcessing: "正在加载中...",
                    sSearch: "搜索",
                    sInfoEmpty: "显示 0 至 0 共 0 项",
                    oPaginate: { "sFirst": "第一页", "sPrevious": "上一页 ", "sNext": "下一页 ", "sLast": "末页 " }
                },              
            });
            checkAll(table);//全选功能
            return oTable;
        },
        // 后台获取数据
        
        serverTable: function (table, paging, url, reqData, columns, columnDefs, fnServerData) {
            var oTable = table.dataTable({
                'ajax': {
                    dataType: 'json',
                    type: 'post',
                    url: url,
                    data: function (aoData) {
                        reqData['dtJson'] = JSON.stringify(aoData);
                        return reqData;
                    },                  
                    error: function (resp) {
                        alert(JSON.stringify(resp));
                    }
                },
                'searching': false,
                'serverSide': true,//是否开启服务器模式          
                'processing': true,//进度条
                'displayStart': 0,//初一开始显示第几页
                'columns': columns,
                'columnDefs': columnDefs,               
                'paging': paging,//是否分页
                'language': {
                    sLengthMenu: "每页显示 _MENU_ 条记录",
                    sZeroRecords: "对不起,查询不到任何相关数据",
                    sInfo: "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                    sInfoEmtpy: "找不到相关数据",
                    sInfoFiltered: "数据表中共为 _MAX_ 条记录",
                    sProcessing: "正在加载中...",
                    sSearch: "搜索",
                    sInfoEmpty: "显示 0 至 0 共 0 项",
                    oPaginate: { "sFirst": "第一页", "sPrevious": "上一页 ", "sNext": "下一页 ", "sLast": "末页 " }
                },
                'lengthMenu': [5, 10, 15, 20, 25],//每一页显示个数
                'sPaginationType': 'full_numbers',//分页显示所有按钮     
                //'fnServerData': function (sSource, aoData, fnCallback) {
                //    $.ajax({
                //        type: 'post',
                //        url: sSource,
                //        data: aoData,
                //        dataType: 'json',
                //        success: fnCallback
                //    });
                //},
            });
            checkAll(table);//全选功能
             return oTable;
        }
    };
    return DataTablePublic;
}();

js 调用

 引入封装好的js  <script src="~/Scripts/hf_datatables.js"></script>

    <script language="javascript" type="text/javascript">
        var table;
        var columns;
        var columnDefs;
        var reqData = { "id": 0 };
        $(document).ready(function () {
            table = jQuery('#myTable');
             columns = [
                            { data: "moduleId", title: "标识" },
                            { data: "moduleName", title: "功能名称" },
                            { data: "moduleUrl", title: "URL地址" },
                            { data: "moduleZdy", title: "是否可自定义" },
                            { data: "moduleId", title: "操作" }
            ];
             columnDefs = [
                         {
                             //最后一列
                             targets: columns.length - 1,
                             render: function (data, type, row, meta) {
                                 var edit = '<button class="btn btn-info btn-sm" οnclick="openModuleEdit(' + '\'' + row.moduleName + '\',' + '\'' + row.moduleUrl + '\'' + ',' + '\'' + row.moduleId + '\'' + ',' + '\'' + row.moduleZdy + '\'' + ')">' + '<i class="fa fa-pencil"></i></button>';
                                 var del = '<button class="btn btn-danger btn-sm"οnclick="del(' + row.moduleId + ')">' + '<i class="fa fa-trash-o"></i></button>';
                                 return edit + del;
                             }
                         }
            ];


             reqData = { "id": 0 };
            Hf_DataTable.serverTable(table, false, "/SeniorManager/ModuleTable", reqData, columns, columnDefs, null);
        })
     

        页面刷新重载
        function reload() {
            var param = { id: 2 };  //post参数
            table.fnSettings().ajax.data = param
            $("#myTable").dataTable().fnDraw(false); //true刷新页面到第一页,false当前页
        }   

</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是datatables的教程: 1. 引入datatables的css和js文件 ```html <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script> ``` 2. 在html中创建一个表格 ```html <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> </tbody> </table> ``` 3. 在js中初始化datatables ```javascript $(document).ready(function() { $('#example').DataTable(); } ); ``` 4. datatables还有很多配置选项,例如分页、排序、搜索等,可以在初始化时入选项进行配置,例如: ```javascript $(document).ready(function() { $('#example').DataTable( { "paging": true, "ordering": true, "info": true } ); } ); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值