关于datatable的自定义列 并排序的功能

Posted on 2020-06-12 17:45  凡凡0410  阅读(617)  评论(0编辑  收藏  举报
//公共的table的请求方法
function commonDataTables(tableId, url, aoColumns, params, page, sort, aSort, playlength, fn, controlLen) {
    aSort = aSort == null ? [
        [0, "desc"]
    ] : aSort;
    var dataLength = "";
    if (!playlength) playlength = 15;
    $('#' + tableId).show();
    var table = $('#' + tableId).DataTable({
        "bPaginate": page,
        "bFilter": false,
        "bSort": sort,
        "aaSorting": aSort,
        "bServerSide": true,
        "bLengthChange": true,
        "bProcessing" : true,
        "bStateSave": params.length&&params[params.length-1].name == "iDisplayStartflag"?false:true,
        "aLengthMenu": [[15, 30, 60, 100], [15, 30, 60, 100]],
        "iDisplayLength": playlength,
        "sAjaxSource": url,
        "bDestroy": true,
        "bAutoWidth": true,
        "sServerMethod": "POST",
        "aoColumns": aoColumns,
        "scrollX": true,
        "scrollCollapse": true,
        "scrollY":tableId == "risk-table"?false:"600px",
        "sPaginationType": "full_numbers", // 用这个分页的样式是自己设计的
        "fnServerParams": function (aoData) {
            for (var i = 0; i < params.length; i++) {
                aoData.push(params[i]);
            };
        },
        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                url: sSource,
                type: "post",
                dataType: isDebug ? "json" : "jsonp",
                jsonp: "callback",
                data: {
                    dt_json: $.toJSON(aoData)
                },
                async: true,
                success: function (records) {
                    var iTotalDisplayRecords = records.iTotalDisplayRecords,iTotalRecords = records.iTotalRecords;
                    if(records.aaData.result){
                        var aaData = records.aaData.result;
                        records={};
                        records.aaData = aaData;
                        records.iTotalDisplayRecords = iTotalDisplayRecords;
                        records.iTotalRecords = iTotalRecords;
                        
                    };
                    try {
                        $('#loading_data').hide();
                      
                        fn && fn(records);
                        fnCallback(records);
                        if (controlLen) {
                            dataLength = records['iTotalRecords'];
                            var pageLen = table.page.len(),
                               pageCount = Math.floor(dataLength / pageLen);
                            if(pageCount>1000){
                                alert('请缩小搜索范围');
                                $('#'+tableId).hide();
                            }
                        }
                    } catch (e) {
                        console.log(e)
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        },
        "oLanguage": {
            // "sLengthMenu": '每页显示 <select>' + '<option value="15">15</option>' + '<option value="30">30</option>' + '<option value="60">60</option>' + '<option value="90">90</option>' + '</select> 条记录',
            // "sZeroRecords": "暂时木有相关数据",
            // "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
            // "sInfoEmtpy": "找不到相关数据",
            // "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
            // "sProcessing": "正在加载中...",
            // "sSearch": "搜索",
            // "sUrl": "",
            // "oPaginate": {
            //     "sFirst": "第一页",
            //     "sPrevious": " 上一页 ",
            //     "sNext": " 下一页 ",
            //     "sLast": " 最后一页 "
            // }
        }
    });
    
    return table;
};


//页面调用渲染
var columns = [
        {"title": "ID", "mData": "id"},
        {"title": "类型", "mData": formattype},
        {"title": "名称", "mData":"evname" },
        {"title": "code", mData:'code',createdCell:formatCode},
         {"title": "创建者", "mData": "creator_uid"},
        {"title": "创建时间", "mData": "create_time"},
        {"title": "{{_('table_base_operate')}}", "mData":"id",createdCell: formatOption}
    ];
var url="接口url";
var params = {};  //传的参数
commonDataTables("risk-table", url, columns, params, true, true)


//最后一个true表示table要进行排序,传false表示不排序

在不排序的情况下,我们对列的自定义如 formattype 就可以了,直接定义mData为function
function formattype(data) {
    var str = data['status'] == 1?"启用":"禁用";
    return str;
};
需要排序的情况下,使用上诉方式会报错,原因是该列的关键字段成了一个函数,无法找到 所以我们使用下面的方式进行自定义列的内容
- 要在column中保留mData对应的显示的字段,自定义渲染的内容通过createdCell的方法 function formatCode(cell,celldata,data) { var status = data['status']; var str = status==0?"初始化":status==1?"试运行":status==2?"进行中":"禁用"; $(cell).html(str); };

 

Copyright © 2024 凡凡0410
Powered by .NET 9.0 on Kubernetes