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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值