DataTable简单应用

Document

<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/dataTables.editor.min.js"></script>
<script src="./js/dataTables.buttons.min.js"></script>
<script src="./js/dataTables.select.min.js"></script>
<script src="./js/dataTables.dateTime.min.js"></script>

<script>
    var table;
    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    });
    table = $('#example').DataTable( {
            dom: "frBtipl",
            pageing: false,
            searching: false,
            scrollX: true,
            scrollY: "250px",
            data: tableData,
            lengthChange: false,
            pageLength: 10,
            filter: false,
            select: true,
            language: {
                processing: "正在获取数据，请稍后...",
                search: "搜索",
                lengthMenu: "显示 _MENU_ 条",
                info: "当前显示的第是 _START_ 到 _END_ 行数据,共 _TOTAL_ 行数据",
                infoEmpty: "记录数为0",
                infoFiltered: "((全部记录数 _MAX_ 条))",
                infoPostFix: "",
                loadingRecords: "系统处理中,请稍等...",
                zeroRecords: "没有您要搜索的内容",
                emptyTable: "没有数据",
                paginate: {
                    first: "第一页",
                    previous: "上一页",
                    next: "下一页",
                    last: "最后一页"
                },
                aria: {
                    sortAscending: "以升序排列此列",
                    sortDescending: "以降序排列此列"
                }
            },
            columns: [
                { data: null, 
                    render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return data.first_name+' '+data.last_name;
                } },
                { data: "position" },
                { data: "office" },
                { data: "extn" },
                { data: "start_date" },
                { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
            ],
            buttons: [
                { extend: "create", editor: editor, },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
        editor.on( 'create', function ( e, json, data ) {
            console.log( e, json, data)
            alert( 'New row added' );
        } );
        editor.on( 'remove', function ( e, json, data ) {
            console.log( e, json, data)
            alert( ' row remove' );
        } );
        editor.on( 'edit', function ( e, json, data ) {
            console.log( e, json, data)
            alert( ' row edit' );
        } );
    })
    
    setTimeout(()=>{
        if(true) {
            console.log(table)
            console.log(table.button(0))
        }
    },3000)
   
</script>

>