52,797
社区成员
发帖
与我相关
我的任务
分享
<script th:inline="javascript">
$(document).ready(function () {
$("#sample-table-2").dataTable({
"bFilter": false, //搜索栏
"bProcessing": false,// 是否显示取数据时的那个等待提示
"bServerSide": true,// 这个用来指明是通过服务端来取数据
"sAjaxSource": "/zoneSearchByPage",// 这个是请求的地址
"fnServerData": retrieveData,// 获取数据的处理函数
"aoColumns": [// 初始化要显示的列
{
"mDataProp": "name"
}, {
"mDataProp": "contactName"
}, {
"mDataProp": "contactPhone"
}, {
"mDataProp": "zoneTypeName"
}, {
"mDataProp": "geographical"
}, {
"mDataProp": "createTimeStr"
}, {
"mDataProp": "id",
"mRender": function (data, type, full) {
return "<div class=\"x_content\">" +
"<button type=\"button\" sec:authorize-url=\"/zoneEdit\"" +
"class=\"btn btn-primary\"" +
"th:onclick=\"edit('" + data + "');\">编辑" +
"</button>" +
"<button type=\"button\" sec:authorize-url=\"/zoneEnable\"" +
"class=\"btn btn-primary\"" +
"th:onclick=\"zoneEnable('" + data + "');\">启用" +
"</button>" +
" | " +
"<button type=\"button\" sec:authorize-url=\"/zoneDisable\"" +
"class=\"btn btn-primary\"" +
"th:onclick=\"zoneDisable('" + data + "');\">禁用" +
"</button>" +
"</div>"
}
}
]
});
});
// 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
function retrieveData(sSource, aoData, fnCallback) {
$.ajax({
url: sSource,// 这个就是请求地址对应sAjaxSource
data: {"aoData": JSON.stringify(aoData)},// 这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数 ,分页,排序,查询等的值
type: 'post',
dataType: 'json',
async: false,
success: function (result) {
fnCallback(result);// 把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
},
error: function (msg) {
}
});
}
</script>