Question

bootstrap table服务器分页的问题（PHP）

不知道JS和PHP的代码应该怎么写。麻烦大神帮忙改一下，谢谢
HTML：
<div id="divQuDaoLieBiao" style="display: block">
<table
id="tabQuDaoLieBiao"
data-locale="zh-CN"
data-height="600"
data-search="true"
data-show-search-clear-button="true"
data-search-align="left"
data-show-toggle="true"
data-show-multi-sort="true"
data-show-columns="true"
data-show-export="true">
<thead>
<tr>
<th data-field="QuYu" data-sortable="true">区域</th>
<th data-field="QuDaoBianMa" data-sortable="true">渠道编码</th>
<th data-field="QuDaoMingCheng" data-sortable="true">渠道名称</th>
</tr>
</thead>
</table>
</div>

JS：
function funBiaoGeShuJu(vUrl) {
//发送POST
var vType = "vDuQuLieBiao";
$.post(vUrl, {
vType: vType
},
function (data, status) {
var arrLieBiao = JSON.parse(data);
var $tabQuDaoLieBiao = $("#tabQuDaoLieBiao");
$tabQuDaoLieBiao.bootstrapTable({
data: arrLieBiao
});
});
};

PHP：
$vType = $_POST[ 'vType' ];
function funDuQuLieBiao() {
include( "conn.php" );
$sql = "SELECT QuYu, QuDaoBianMa, QuDaoMingCheng FROM qudaorenyuan";
$result = $conn->query( $sql );
// 创建数组
$arr = array();
if ( $result->num_rows > 0 ) {
// 写入数组
while ( $row = $result->fetch_assoc() ) {
array_push( $arr, $row );
}
echo json_encode( $arr, JSON_UNESCAPED_UNICODE );
} else {
echo "无数据";
}

$conn->close();
}

Answer 1

前端代码块

<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">

function initTable(){

$('#test-table').bootstrapTable({

method: 'get',

toolbar: '#toolbar', //工具按钮用哪个容器

striped: true, //是否显示行间隔色

cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

pagination: true, //是否显示分页（*）

sortable: false, //是否启用排序

sortOrder: "asc", //排序方式

pageNumber:1, //初始化加载第一页，默认第一页

pageSize: 10, //每页的记录行数（*）

pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）

url: "/testProject/page4list.json",//这个接口需要处理bootstrap table传递的固定参数

queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort

// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber

//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数

sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

strictSearch: true,

//showColumns: true, //是否显示所有的列

//showRefresh: true, //是否显示刷新按钮

minimumCountColumns: 2, //最少允许的列数

clickToSelect: true, //是否启用点击选中行

searchOnEnterKey: true,

columns: [{

field: 'id',

title: 'id',

align: 'center'

}, {

field: 'testkey',

title: '测试标识',

align: 'center'

}, {

field: 'testname',

title: '测试名字',

align: 'center'

},{

field: 'id',

title: '操作',

align: 'center',

formatter:function(value,row,index){

//通过formatter可以自定义列显示的内容

//value：当前field的值，即id

//row：当前行的数据

var a = '<a href="" >测试</a>';

}

}],

pagination:true

});

}

在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。

服务端代码

@RequestMapping(value = "/page4list.json")

public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,

HttpServletResponse response) {

//搜索框功能

//当查询条件中包含中文时，get请求默认会使用ISO-8859-1编码请求参数，在服务端需要对其解码

if (null != searchText) {

try {

searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");

} catch (Exception e) {

e.printStackTrace();

}

}

//在service通过条件查询获取指定页的数据的list

List<MwmsgType> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);

//根据查询条件，获取符合查询条件的数据总量

int total = mwMsgQueueService.queryCountBySearchText(searchText);

//自己封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点

PageResultForBootstrap page = new PageResultForBootstrap();

page.setTotal(total);

page.setRows(list);

//page就是最终返回给客户端的数据结构，可以直接返回给前端

//下边这段，只是我自己的代码有自定义的spring HandlerInterceptor处理返回值，可以忽略。

request.setAttribute(Constants.pageResultData, page);

}

完成上述代码，即可实现服务器端自动分页，bootstrap-table根据服务器端返回的total，以及table设定的pageSize，自动生成分页的页面元素，每次点击下一页或者指定页码，bootstrap-table会自动给参数pageNumber赋值，服务器返回指定页的数据。

如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。

这时就需要在bootstrap-table的参数列表中显式设置

contentType: "application/x-www-form-urlencoded"

设置成form表单的形式，tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中，之后就可以直接通过@RequestParam映射参数获取