zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    高盛、沃尔玛 题做出来还挂了的吐槽
    amazon师兄debrief
    到所有人家距离之和最短的中点 296. Best Meeting Point
    问问题没人回答的情况怎么办终于有解了
    找名人 277. Find the Celebrity
    数组生存游戏 289. Game of Life
    547. Number of Provinces 省份数量
    428. Serialize and Deserialize Nary Tree 序列化、反序列化n叉树
    alias别名简介和使用
    面试官:线程池执行过程中遇到异常会发生什么,怎样处理? Vincent
  • 原文地址:https://www.cnblogs.com/feihong84/p/5747775.html
Copyright © 2011-2022 走看看