zoukankan      html  css  js  c++  java
  • 关于datatable的自定义列 并排序的功能

    //公共的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); };
  • 相关阅读:
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.3 日历
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.3 定时器
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 activation-group& dialect& date-effective
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 auto-focus
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 agenda-group
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 ruleflow-group&salience
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 lock-on-active
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 no-loop
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.1 规则文件
    【java规则引擎】《Drools7.0.0.Final规则引擎教程》第3章 3.2 KIE API解析
  • 原文地址:https://www.cnblogs.com/fyjz/p/13100938.html
Copyright © 2011-2022 走看看