meTables.js 基于 jquery.dataTables.js 表格

因为jquery.dataTables.js 只是显示数据,没有自带的编辑、新增、删除数据的功能,需要依靠扩展实现,所以自己写了一个编辑、新增、删除数据的功能

主页:https://mylovegy.github.io/jinxing-tables/?page=home

在一个页面中加入第二个meTables

<script>
var m2 = meTables({
            sTable: "#me-table",
            buttonSelector: "#me-table-buttons-two",
            title: "示例",
            number: false,
            searchForm: "#me-table-search",
            sModal: "#me-table-modal1",
            sFormId: "#me-table-update1",
            checkbox: {width: "60px"},
            url: {
                search:'/admin/api/getbills?q=3&t=guanliantushu',
            },
            // 按钮配置说明
            buttons: {
                // 关闭之前存在按钮
                create: null,
                updateAll: null,
                // 自定义添加按钮
            },
            operations: {
                buttons: {
                    update: {
                        show: function (data) {
                            return data.id === 11;
                        }
                    },
                    other: {
                        title: "其他信息",
                        btnClass: "btn-warning",
                        operationClass: "me-table-other",
                        icon: "fa fa-user",
                        colorClass: "red"
                    }
                }
            },
            table: {
                searching: false,
                bLengthChange: false,//隐藏每页显示多少条下拉框栏:https://stackoverflow.com/questions/19928753/hide-lengthmenu-from-jquery-datatable
                columns: [
                    {
                        title: "ID",
                        data: "ID",
                        defaultOrder: "desc", // 默认一个排序
                        edit: {type: "hidden"},
                        search: {type: "text",id:"q",name:"q"}
                    },
                    {
                        title: "发票号码",
                        data: "BILL_ID",
                        edit: {
                            required: true,
                            rangelength: "[2, 40]"
                        },
                        // value: ['我的', '你的', '他的'],
                        // search: {type: "select"},
                        sortable: false
                    },
                    {
                        title: "价格",
                        data: 'PRICE',
                        view: true, // 导出不显示
                        // hide: true,   // 列表不显示处理
                        edit: {
                            name: "text1",
                            type: "text"
                        }
                    },
                    {
                        title: "实洋",
                        data: 'PAYMENT',
                        view: false, // 导出不显示
                        hide: true,   // 列表不显示处理
                        edit: {
                            name: "text2",
                            type: "customize"
                        }
                    },
                    
                ]
            }
        }).init();
</script>

<script>
//手工查询方法:
        m2.options.params = {q: r_id}//请求携带参数
        m2.search()//查询m2
</script>


接口处需要获取$draw参数:$draw = $request->get('draw', '');,并返回:return ['draw' => $draw, 'recordsFiltered' => count($DataRows),'recordsTotal'=>count($DataRows), 'data' => $DataRows];