bootstrap table更新数据,根据查询条件和参数展示列表

来源:互联网 发布:java中的高级流 编辑:程序博客网 时间:2024/06/16 12:45

最近刚开始接触bootstrap table,感觉比较好用,初始化很方便。
html代码:

<div class="panel panel-default">            <div class="panel-heading">搜索</div>            <div class="panel-body">                <form role="form" id="searchForm" class="form-inline">                    <div class="form-group">                        <label for="sname1">用户名</label> <input type="text"                            class="form-control" id="sname1" name="sname1" placeholder="请输入名称">                    </div>                    <div class="form-group">                        <button type="button" id="searchBtn" class="btn btn-default">开始搜索</button>                    </div>                </form>            </div>        </div>        <!--列表展示-->        <div class="table-responsive" id="listDiv">            <table class="table table-striped table-hover" id="studentTable">            </table>        </div>

前面一个div是搜索的表单,显示数据的是一个table,初始化bootstrap table的js网上有很多可以参考,我这里只是用最简单的前端分页,js代码如下:

    $(document).ready(function() {            //调用函数,初始化表格             var oTable = new TableInit();            oTable.Init();    });    var TableInit = function () {            var oTableInit = new Object();            //初始化Table            oTableInit.Init = function () {                var sname11 = $("#sname1").val();                var urlStr = '/StudentInfo/student/listData?sname1=' + sname11;                //console.log(urlStr);                $('#studentTable').bootstrapTable({                    url: urlStr,         //请求后台的URL(*)                    method: 'get',                      //请求方式(*)                    toolbar: '#toolbar',                //工具按钮用哪个容器                    striped: true,                      //是否显示行间隔色                    cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)                    pagination: true,                   //是否显示分页(*)                    //sortable: false,                     //是否启用排序                    //sortOrder: "asc",                   //排序方式                    //queryParams: oTableInit.queryParams,//传递参数(*)                    queryParams : {                        sname1 : 'r',                        test:'r'                    },                    sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)                    pageNumber:1,                       //初始化加载第一页,默认第一页                    pageSize: 5,                       //每页的记录行数(*)                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)                    strictSearch: true,                    clickToSelect: true,                //是否启用点击选中行                    height: 460,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度                    uniqueId: "id",                     //每一行的唯一标识,一般为主键列                    cardView: false,                    //是否显示详细视图                    detailView: false,                   //是否显示父子表                    columns: [{                        checkbox : true                    }, {                        field: 'sno',                        title: '学号'                    }, {                        field: 'sname',                        title: '姓名'                    }, {                        field: 'gender',                        title: '性别'                    }, {                        field: 'major',                        title: '专业'                    },  {                        title: '操作',                        align: 'center',                        formatter:function(value,row,index){                               var e = '<button type="button" class="btn btn-primary" onclick="updateFun(\''+ row.id +'\')">修改</button>';                             var d = '<button type="button" class="btn btn-danger" onclick="deleteFun(\''+ row.id +'\')">删除</button>';                          return e+d;                        } }                    ]                });            };            //得到查询的参数          oTableInit.queryParams2 = function (params) {                var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的                    //limit: params.limit,   //页面大小                    //offset: params.offset,  //页码                    sname1 : "r",                };                return temp;            };            return oTableInit;        };

点击搜索按钮后,一开始采用再次调用init()方法,发现参数无法传递过去,列表也没有更新,后来看了网上一篇资料发现不能在调用该Init()方法,正确写法应该为:

$("#searchBtn").click(function() {                var sname1 = $("#sname1").val();                $.ajax({                     type: "post",                     url: "/StudentInfo/student/listData",                     data: {sname1 : sname1},                      dataType:"json",                     success : function(json) {                        $("#studentTable").bootstrapTable('load', json);//主要是要这种写法                    }                });            });

然后问题解决,当然上面这个方法也应该放在$(document).ready(function() {
})里。

原创粉丝点击