bootstrap table 分頁後,從新搜索的問題

前提: 自定義搜索且有分頁功能,好比搜索產品名的功能.

現象:當搜索充氣娃娃的時候返回100條記錄,翻到第五頁.  這時候搜索按摩棒,數據有200條,結果應該是第一頁的記錄,可是實際顯示的仍是第五頁的結果.  也就是從新搜索後,pagenumber沒有變.

按網上大部分說的：從新設置option就好了

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

以上是解決不了這個問題。

正確作法是

$("#table").bootstrapTable('destroy');先要將table銷燬，不然會保留上次加載的內容

TableObj.oTableInit();從新初使化表格。

 

所有JS

 <script type="text/javascript">
        $(function () {
            TableObj.oTableInit();
            $("#btn_query").click(function () {
                $("#tb_departments").bootstrapTable('destroy');
                TableObj.oTableInit();
            });
            $("#btn_edit").click(function () {
                $.messager.alert('提示', '請選擇要刪除的記錄');
            });
            $("#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', //請求後臺的URL（*）
                    method: 'get', //請求方式（*）
                    toolbar: '#toolbar', //工具按鈕用哪一個容器
                    striped: true, //是否顯示行間隔色
                    cache: false, //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                    pagination: true, //是否顯示分頁（*）
                    sortable: false, //是否啓用排序
                    sortOrder: "asc", //排序方式
                   // queryParams: TableObj.queryParams(this), //傳遞參數（*）
                    queryParams: function (params) {
                        return {
                            PagedIndex: this.pageNumber,
                            PagedSize: this.pageSize,
                            DeptName: $("#txt_search_departmentname").val(),
                        };
                    },
                    sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
                    pageNumber: 1, //初始化加載第一頁，默認第一頁
                    pageSize: 5, //每頁的記錄行數（*）
                    pageList: [5, 10, 25, 50, 100], //可供選擇的每頁的行數（*）
                    search: false, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
                    strictSearch: true,
                    showColumns: true, //是否顯示全部的列
                    showRefresh: true, //是否顯示刷新按鈕
                    minimumCountColumns: 2, //最少容許的列數
                    clickToSelect: true, //是否啓用點擊選中行
                    height: 500, //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
                    uniqueId: "deptID", //每一行的惟一標識，通常爲主鍵列
                    idField: 'deptID',
                    showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
                    cardView: false, //是否顯示詳細視圖
                    detailView: false, //是否顯示父子表
                    columns: [
                        {
                            //field: 'deptID',
                            //field: 'deptID',
                            checkbox: true
                        },
                        {
                            field: 'DeptName',
                            title: '部門名稱'
                        }, {
                            field: 'CreateBy',
                            title: '添加人'
                        }, {
                            field: 'CreateDT',
                            title: '添加日期',
                            formatter: function (val) {
                                return val == 'undefined' || !val ? '-' : val.formatterString(false);
                            }
                        }
                    ]
                });
            }
        };
        //保存
        function Save() {
            Tool.SaveModal($('#tb_departments'));
        }
    </script>

View Code