datatable - editor 配置(附带后台返回说明)


var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: '../php/dates.php',
        table: '#example',
        fields: [ {
                label: '姓名:',
                name:  'first_name',
            }, {
                label: 'Last name:',
                name:  'last_name'
            }, {
                label: 'Updated date:',
                name:  'updated_date',
                type:  'datetime',
                def:   function () { return new Date(); }
            }, {
                label: 'Registered date:',
                name:  'registered_date',
                type:  'datetime',
                def:   function () { return new Date(); }
            }
        ],
        i18n: {
            datetime: {
                previous: 'Zh_cn',
                next:     'Premier',
                months:   [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
                weekdays: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ]
            }
        }
    } );
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
    $('#example').DataTable( {
        dom: 'Bfrtip',

"serverSide": true,

        ajax: '../php/dates.php',
        "language": {
    "sProcessing":   "处理中...",
    "sLengthMenu":   "显示 _MENU_ 项结果",
    "sZeroRecords":  "没有匹配结果",
    "sInfo":         "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
    "sInfoEmpty":    "显示第 0 至 0 项结果,共 0 项",
    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
    "sInfoPostFix":  "",
    "sSearch":       "搜索:",
    "sUrl":          "",
    "sEmptyTable":     "表中数据为空",
    "sLoadingRecords": "载入中...",
    "sInfoThousands":  ",",
    "oPaginate": {
        "sFirst":    "首页",
        "sPrevious": "上页",
        "sNext":     "下页",
        "sLast":     "末页"
    },
    "oAria": {
        "sSortAscending":  ": 以升序排列此列",
        "sSortDescending": ": 以降序排列此列"
    }
},
        columns: [
            { data: 'first_name' },
            { data: 'last_name' },
            { data: 'updated_date' },
            { data: 'registered_date' }
        ],
        select: true,
        buttons: [
            { extend: 'create', editor: editor ,formMessage: '输入新的数据,然后点击"Save" 按钮保存数据.',text: '新增',formButtons:'提交','formTitle':'提交'},
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );


//后台返回数据

是个数组  包含字段  data,draw , recordsFiltered, recordsTotal

data (数组)数组对象必须包含 DT_RowId 字段(生成tr的id)修改和删除中将作为唯一标识

//建议引用文件





说明:下拉选的修改需要在filed中定义

type: 'select',
ipOpts: [
    {
        "label": "未支付",
        "value": "1"
    },
    {
        "label": "未审核",
        "value": "2"
    },
    {
        "label": "推广中",
        "value": "3"
    },
    {
        "label": "已超时",
        "value": "4"
    },
    {
        "label": "已拒单",
        "value": "5"
    },
    {
        "label": "已完成",
        "value": "6"
    }

]

配置项中官方文档没有的参数,用于动态添加传入服务器的参数,实测ajax.data中配置初始化表格可用,刷新表格

table.ajax.reload();时参数带不过去
"serverParams": function (aoData) {
    aoData.status = status
},

你可能感兴趣的:(datatable - editor 配置(附带后台返回说明))