• 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', '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', '120px', render: function (data, type, row, meta) { return '<span>' + dealNullValue(row.statusCn) + '</span>'; } }, { title: '处理人', className: 'text-center', '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();  
  • 相关阅读:
    NTFS文件系统的主要优点体现在以下三个方面
    子网划分,主机号,网络号计算
    hdu1008
    hdu1006
    hdu1004
    Git 版本回退
    Git 提交修改内容和查看被修改的内容
    Git 怎么创建本地库,向本地库提交文件
    mybatis中#{}和${}的区别
    请求头和响应头
  • 原文地址:https://www.cnblogs.com/pfcan66/p/9019698.html
Copyright © 2020-2023  润新知