BootStrap Table 分頁(yè)后重新搜索問(wèn)題的解決辦法
前提: 自定義搜索且有分頁(yè)功能,比如搜索產(chǎn)品名的功能.
現(xiàn)象:當(dāng)搜索的時(shí)候返回100條記錄,翻到第五頁(yè). 這時(shí)候搜索,數(shù)據(jù)有200條,結(jié)果應(yīng)該是第一頁(yè)的記錄,但是實(shí)際顯示的還是第五頁(yè)的結(jié)果. 也就是重新搜索后,pagenumber沒(méi)有變.
按網(wǎng)上大部分說(shuō)的:重新設(shè)置option就行了
$('#tableList').bootstrapTable({pageNumber:1,pageSize:10});以上是解決不了這個(gè)問(wèn)題。
正確做法是
$("#table").bootstrapTable('destroy');先要將table銷(xiāo)毀,否則會(huì)保留上次加載的內(nèi)容
TableObj.oTableInit();重新初使化表格。
代碼如下所示:
<script type="text/javascript">
$(function () {
TableObj.oTableInit();
$("#btn_query").click(function () {
$("#tb_departments").bootstrapTable('destroy');
TableObj.oTableInit();
});
$("#btn_edit").click(function () {
$.messager.alert('提示', '請(qǐng)選擇要?jiǎng)h除的記錄');
});
$("#btn_add").click(function () {
var actionUrl = "@Url.Action("_create")";
var param = {};
Tool.ShowModal(actionUrl, param, "新增");
})
});
var TableObj = {
//初始化Table
oTableInit: function () {
$('#tb_departments').bootstrapTable({
url: '/Department/GetDepartment', //請(qǐng)求后臺(tái)的URL(*)
method: 'get', //請(qǐng)求方式(*)
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存,默認(rèn)為true,所以一般情況下需要設(shè)置一下這個(gè)屬性(*)
pagination: true, //是否顯示分頁(yè)(*)
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
// queryParams: TableObj.queryParams(this), //傳遞參數(shù)(*)
queryParams: function (params) {
return {
PagedIndex: this.pageNumber,
PagedSize: this.pageSize,
DeptName: $("#txt_search_departmentname").val(),
};
},
sidePagination: "server", //分頁(yè)方式:client客戶(hù)端分頁(yè),server服務(wù)端分頁(yè)(*)
pageNumber: 1, //初始化加載第一頁(yè),默認(rèn)第一頁(yè)
pageSize: 5, //每頁(yè)的記錄行數(shù)(*)
pageList: [5, 10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)(*)
search: false, //是否顯示表格搜索,此搜索是客戶(hù)端搜索,不會(huì)進(jìn)服務(wù)端,所以,個(gè)人感覺(jué)意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點(diǎn)擊選中行
height: 500, //行高,如果沒(méi)有設(shè)置height屬性,表格自動(dòng)根據(jù)記錄條數(shù)覺(jué)得表格高度
uniqueId: "deptID", //每一行的唯一標(biāo)識(shí),一般為主鍵列
idField: 'deptID',
showToggle: true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細(xì)視圖
detailView: false, //是否顯示父子表
columns: [
{
//field: 'deptID',
//field: 'deptID',
checkbox: true
},
{
field: 'DeptName',
title: '部門(mén)名稱(chēng)'
}, {
field: 'CreateBy',
title: '添加人'
}, {
field: 'CreateDT',
title: '添加日期',
formatter: function (val) {
return val == 'undefined' || !val ? '-' : val.formatterString(false);
}
}
]
});
}
};
//保存
function Save() {
Tool.SaveModal($('#tb_departments'));
}
</script>以上所述是小編給大家介紹的BootStrap Table 分頁(yè)后重新搜索問(wèn)題的解決辦法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 完美實(shí)現(xiàn)bootstrap分頁(yè)查詢(xún)
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- Bootstrap Paginator分頁(yè)插件使用方法詳解
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
- Bootstrap table分頁(yè)問(wèn)題匯總
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
- DataTables+BootStrap組合使用Ajax來(lái)獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法(排序,過(guò)濾,分頁(yè)等)
- Bootstrap分頁(yè)插件之Bootstrap Paginator實(shí)例詳解
- 基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解
- bootstrap與pagehelper實(shí)現(xiàn)分頁(yè)效果
相關(guān)文章
JavaScript中的JSON轉(zhuǎn)為Python可讀取
本文主要介紹了JavaScript中的JSON轉(zhuǎn)為Python可讀取,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
uniapp內(nèi)置組件scroll-view案例詳解(完整代碼)
這篇文章主要介紹了uniapp內(nèi)置組件scroll-view案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
微信小程序五子棋游戲的悔棋實(shí)現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲的悔棋實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了微信小程序中悔棋的原理與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
window.open打開(kāi)新頁(yè)面失效解決方案
這篇文章主要給大家介紹了關(guān)于window.open打開(kāi)新頁(yè)面失效的解決方案,移動(dòng)端和PC端全部通過(guò)window.open()來(lái)跳轉(zhuǎn)頁(yè)面窗口,文中給出了詳細(xì)的解決方案,需要的朋友可以參考下2023-07-07
總結(jié)JavaScript的正則與其他語(yǔ)言的不同之處
我接觸過(guò)不少語(yǔ)言,我很看重一門(mén)語(yǔ)言的正則表達(dá)式是否強(qiáng)大,還有正則與語(yǔ)法的結(jié)合是否緊密.在這一點(diǎn)上,JavaScript做的還不錯(cuò),至少有正則字面量.當(dāng)然,最強(qiáng)大的還是Perl.但最近發(fā)現(xiàn)JavaScript中的正則有幾個(gè)不同于其他語(yǔ)言的地方,下面一起來(lái)看下。2016-08-08
JS使用 cryptojs加密解密(對(duì)稱(chēng)加密庫(kù))的問(wèn)題
js 加密解密可以使用 crypto-js,這是一個(gè)對(duì)稱(chēng)加密的庫(kù), 可以使用 AES DES 但沒(méi)有 rsa 等非對(duì)稱(chēng)加密的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
js判斷數(shù)組是否包含某個(gè)字符串變量的實(shí)例
下面小編就為大家分享一篇js判斷數(shù)組是否包含某個(gè)字符串變量的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-11-11

