Selesaikan masalah yang dihadapi semasa pelaksanaan kemahiran paging_javascript jadual bootstrap komponen JS

Artikel ini berkongsi isu halaman bootstrap-table untuk rujukan anda. Kandungan khusus adalah seperti berikut

Masalah 1: Pelayan tidak boleh mendapatkan nilai borang Tiada masalah dengan rentetan pertanyaan, tetapi request.form tidak boleh mendapatkan nilai

Penyelesaian: Ini ialah masalah ajax Kod asal menggunakan ajax asli. 1 boleh diselesaikan dengan membaca fail aliran. 2 Jika anda ingin menggunakan kaedah request.form, tetapkan contentType: "application/x-www-form-urlencoded",

sebagai

 $('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",

Soalan 2. Tetapkan parameter yang dihantar ke pelayan

Kaedah:

function queryParams(params) {

return {
pageSize: params.limit,

pageNumber: params.pageNumber,

UserName: 4

};

}

 $('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true, 

queryParams: queryParams,

Masalah 3. Maklumat Saiz halaman tidak boleh diperolehi di latar belakang

Penyelesaian:

1 ditetapkan dalam queryParams

2 Ubah suai fail sumber dalam fail bootstrap-table.minjs kepada

"had"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

Anda juga boleh mengubah suai bootstrap-table.js

if (this.options.queryParamsType === 'limit') {
params = {
search: params.searchText,
sort: params.sortName,
order: params.sortOrder
};
if (this.options.pagination) {
params.limit = this.options.pageSize;

params.pageNumber=this.options.pageNumber,
params.offset = this.options.pageSize * (this.options.pageNumber - 1);
}
}

Tatarajah ditambah "queryParamsType": "had",

Lengkap

<script type="text/javascript">




$(document).ready(function() {
 $('#tableList').bootstrapTable({
method: 'post',
url: "getcompapylist",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
pageSize: 10,
pageNumber:1,
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框（选择显示的列）
sidePagination: "server", //服务端请求
queryParams: queryParams,
//minimunCountColumns: 2,
responseHandler: responseHandler,
columns: [
{
field: 'CompanyId',

checkbox: true

},
{
field: 'qq',

title: 'qq',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}
,
{
field: 'companyName',

title: '姓名',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}
]
});

});
function responseHandler(res) {


if (res.IsOk) {
var result = b64.decode(res.ResultValue);

var resultStr = $.parseJSON(result);
return {
"rows": resultStr.Items,
"total": resultStr.TotalItems
};

} else {
return {
"rows": [],
"total": 0
};
}

}

//传递的参数

function queryParams(params) {

return {
pageSize: params.limit,

pageNumber: params.pageNumber,

UserName: 4

};

}
</script>

Soalan 4. Cari semula selepas halaman

Prasyarat: Carian tersuai dan fungsi halaman, seperti fungsi mencari nama produk.

Fenomena: Apabila mencari anak patung kembung, 100 rekod dipulangkan dan dipusingkan ke halaman kelima Apabila mencari kayu urut, terdapat 200 rekod Hasilnya adalah rekod pada halaman pertama, tetapi paparan sebenar masih pada halaman kelima Hasilnya, selepas mencari semula, nombor halaman tidak berubah

Penyelesaian: Hanya tetapkan semula pilihan.

 function search(){

 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10});

}

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.