一个页面添加两个meTables(DataTables)并进行动态查询
2021-02-02 19:33:25
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];
因为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];