Datatables 從后台獲取數據與不從后台獲取數據


var baseParm = {
info: false,
filter: false,
destroy: true,
ordering: false,
processing: true,
lengthChange: false,
serverSide: true
};
$('#operConfigGrid').DataTable($.extend({}, baseParm, {
                    ajax: function (pageData, callback, settings) {
                        var send = {
                            draw: pageData.draw,
                            pagination: Math.floor(pageData.start / pageData.length) + 1,
                            pageLength: pageData.length,
                            account: basic.account
                        };
                        common.post('/platform/agent/getOperLog', send, function (result) {//ommon.post是自己封裝的一個ajax方法
                            var data = {
                                data: result.rows.operLogs,
                                recordsTotal: result.total,
                                recordsFiltered: result.total
                            };
                            callback(data);
                            $('.operationform span[name=statusCn]').html(result.rows.statusCn || "--");
                            $('.operationform input[type=hidden]').val(basic.account || "--");
                        });
                    },
                    columns: [
                        {title: '時間', data: 'createTime', render: ''},
                        {
                            title: '操作記錄', data: 'operation1', render: function (value, type, row) {
                            return row.operation;
                        }, className: 'text-left col-xs-5'
                        },
                        {
                            title: '備注內容', data: 'comment', render: function (value, type, row) {
                            return value || '-';
                        }
                        },
                        {title: '操作人', data: 'operator', render: ''}
                    ]
                }));
傳給后台的參數:json:{"draw":1,"pagination":1,"pageLength":10,"tcAccount":"A180507CDFTS-TCNX"}
 
后台返回的數據:
//不從后台獲取數據,分頁每頁顯示2條數據
var logData=[
{"content":"處理內容","createTime":"2018-05-07 15:00:00","operator":"張三","remark":"備注信息","status":2,"statusCn":"成功"},
{"content":"處理內容","createTime":"2018-05-07 15:00:00","operator":"張三","remark":"備注信息","status":2,"statusCn":"成功"},
{"content":"處理內容","createTime":"2018-05-07 15:00:00","operator":"張三","remark":"備注信息","status":2,"statusCn":"成功"}
]

$logList.DataTable( { info:
false, paging: true,
        pageLength:2, serverSide:
false, autoWidth: false, data: logData||[], columns: [ { title: '時間', className: 'text-center', width: '160px', render: function (data, type, row, meta) { return '<span>' + dealNullValue(row.createTime) + '</span>'; } }, { title: '處理內容', className: 'text-left', render: function (data, type, row, meta) { return '<span>' + dealNullValue(row.content) + (row.remark?',備注:'+row.remark:'')+'</span>'; } }, { title: '處理狀態', className: 'text-center', width: '120px', render: function (data, type, row, meta) { return '<span>' + dealNullValue(row.statusCn) + '</span>'; } }, { title: '處理人', className: 'text-center', width: '120px', render: function (data, type, row, meta) { return '<span>' + dealNullValue(row.operator) + '</span>'; }, } ] });

 

//不分頁從后台獲取數據展示表格的2種方式
$('#autoTicketIssueOpContent').DataTable({ info:false, paging:false, ordering:false, searching:false, lengthChange:false, ajax:{ url:'/platform/customer/autoTicketRecord', data:{tickOrderId:tickOrderId}, type:'post', dataSrc:function(data) { var result = data.rows || [];return result; } }, columns:[ {title:'操作時間',data:'operateTime',className:'min-120'}, {title:'備注',data:'remark',className:'text-left'}, {title:'操作人',data:'operater',className:'min-120'} ] }); $('#autoTicketExecuteContent').DataTable({ info:false, paging:false, ordering:false, searching:false, lengthChange:false, ajax: function (pageData, callback, settings) { $.ajax({ url:'/platform/button/autoErrorMsg', data:{pnrCode:$("#pnrCodeId").text()}, success: function (result) { var data={ data:result.data||[] } callback(data); } }); }, columns:[ {title:'執行命令',data:'etermCmd'}, {title:'執行結果',data:'result'} ] });

dataTables不從后台取數據本地刷新數據解決只能初始化一次問題 請參照:https://my.oschina.net/keysITer/blog/806369  【不從后台取數據,數據在本地修改了,如何刷新表格數據的問題】

               var dataTable=$('#xxxx').DataTable({});
                //列表重新繪制時處理一些事情
                dataTable.DataTable().on('draw', function () {
                    //do something
                });
                //獲取表格所有的行元素tr標簽
                var rows=dataTable.DataTable().rows().nodes();
                //獲取表格所有的行對應的數據
                var rowDatas=dataTable.DataTable().data();  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM