后端表格分页
后端表格分页组件 snippets:
sword.backTable
1.属性说明
1.1 td标签上的属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| data-columns | 任意字符串 | 对应后端的该列数据的key值 |
| width | 任意字符串 | 改列对应的宽度 |
| visible | true/false | 该列是否显示 |
| data-columns-align | 任意字符串 | 表格的对齐方式，可选left,right,center |
| filter | 过滤器格式,过滤器函数│入参1,入参2，入参3 | 过滤器方法，通过调用过滤器函数将该参数处理成指定的格式。 |
| filter-target | 过滤器作用的列号 | 当有过滤器时，需要设置 |
1.2 后端分页调用函数$().BackTable(option);
option
| 属性名 | 属性值 | 说明 |
|---|---|---|
| columnDefs | 对象类型 | 列回调参数 |
| ajaxParam | 对象类型 | Ajax函数，输入参数为url(ajax取参数的地址)和success(调用成功的操作函数) |
ajaxParam内的参数
| 属性名 | 属性值 | 说明 |
|---|---|---|
| url | 任意地址 | 取数据的url地址 |
| data | 对象类型 | 上送后台的参数,内部可以放置一个dataFn的函数参数，用来处理筛选框的取餐 |
| returnCodeKey | 后台返回参数的标志位key │ 'none' │ 默认'hostRspCode' | 用于判断后台返回交易类型为成功还是失败 |
| returnMsgKey | 后台返回参数的日志key │ 默认'hostRspMsg' | 用于提取后台返回交易日志 |
| successCode | 后台返回交易表示成功类型的状态码 │ 默认'00000' | 配合上述字段，可以实现当后台返回交易为失败市，sowrdajax组件会自动调用lobibox控件显示错误类型和错误日志，当returnCodeKey送'none'时，则将后台返回的数据直接透传至success函数，不进行交易状态校验 |
| success | function | ajax成功时调用的函数方法。当送returnCodeKey和successCode，只有成功交易才会调用此方法；如果returnCodeKey送'none'时，则无论交易成功还是失败，均调用此方法 |
表格展示问题 同前端分页
过滤器属性说明 同前端分页
表格内部元素的方法封装 同前端分页
2. 代码展示
<sword:listTable id="table_sword_info">
<tr>
<th data-columns="Name" width="120px">Name</th>
<th data-columns="Position" data-columns-align="left">Position</th>
<th data-columns="Office" data-columns-align="left" width="80px">Office</th>
<th data-columns="Start_date" width="60px" >Start_date</th>
<th data-columns="Extn" width="60px" filter="isBetween|Extn,'1000','5000'">Extn</th>
<th data-columns="Extn" width="60px">Extn</th>
</tr>
</sword:listTable>
v
ar table_option = {
columnDefs: [
{
"render": function (data, type, row) {
return sword.table.trans2amodal({
target: 'jsptag_modal',
clickFn: 'alert',
fnData: data,
tagName: data
});
},
"targets": 0
}, {
"render": function (data, type, full, meta) {
return sword.table.trans2longtitle({
maxlength: 16,
tagName: data
});
},
"targets": 1
}, {
"render": function (data, type, row) {
return sword.table.trans2button(
{
clickFn: 'alert',
icon: 'fa-edit',
tagName: '编辑',
className: 'btn-primary-o',
fnData: data,
type: "button"
});
},
"targets": 5
}
],
ajaxParam: {
data: {
param: 'test',
dataFn: function () {
//此处可以进行一些数据的处理操作，用来加工向后上送的参数
return { param2: 'test2' }
}
},
url: "<%=path%>/json/data.json",
type: "GET",
success: function (result) {
return result.response.data;
}
}
};
window.buildTable = function () {
// 该函数即可以刷新，也可以实现表格重建
$("#table_sword_info").FrontTable(table_option);
$("#table_sword_info_filter").append('<button class="btn btn-warning pull-left" style="margin-right:15px" onclick="buildTable()"><i class="fa fa-fw fa-refresh"></i>刷新表格</button>')
};
buildTable();
//后台取到前台上送的参数
{
method:'back', //分页方式
pageNow:'1', //当前页面
limit:'10' //每页展示的数据条数
}
//后台返回到前台的参数
{
response:{
total:'30' //表示总的记录数
data: {} //返回的数据数组
},
hostRspCode:'00000' //状态码，key值可变
hostRspMsg:'操作成功' //状态说明，key值可变
}