bootstrap table 后台传排序字段及升序降序

 $('#mytab').bootstrapTable({
                url: "数据源
                dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total
                totalField: 'total',
                height: tableHeight(),//高度调整
               sidePagination: "server",//服务端分页
               method: "get",//请求方式
               pagination: true,//是否分页
               escape: true,
               pageNumber: 1,
               totalRows: 0, // server side need to set
               queryParams: function getParams(params) {
                    var searchKey1 = $("#s1").val(); 
                    var searchKey2 = $("#s2").val(); 
                    var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                             limit: params.limit, //页面大小
                                 searchKey1:searchKey1,
                                 searchKey2:searchKey2,
                                 sortName:this.sortName,
                                 sortOrder:this.sortOrder,

                                  pageindex:this.pageNumber//当前页码
                               };
                   return temp;
                },
                buttonsAlign: "left",//按钮对齐方式
                selectItemName: 'id',
                toolbar: "#toolbar",
                toolbarAlign: 'left',
                columns: [
                    {
                        title: "全选",//标题
                        width: 60,//宽度
                        align: "center",//水平
                        checkbox: true,
                        valign: "middle"//垂直
                     
                    },
                    {
                        field: "id",
                        title: "id",
                        sortable: true
                    },
                    {
                        field: "DeviceName",
                        title: "DeviceName",
                        sortable: true
                    }
                ],
                onRefresh: function (params) {
                    if($("#refreshWay .active").data("toggle")=== "off"){
                     autoRefresh();
                    }
                },
                locale: "zh-CN"//中文支持
            });

           在queryParams方法中添加排序字段和升序降序字段到后台

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在bootstrapTable中使用json数据,你需要确保json数据满足以下要求: 1. 数据格式为json数组,每个元素代表一行数据。 2. 每个元素是一个json对象,对象的属性名对应表格的列名,属性值对应表格的单元格内容。 下面是一个示例json数据: ```json [ { "id": 1, "name": "John", "age": 30, "gender": "male" }, { "id": 2, "name": "Jane", "age": 25, "gender": "female" }, { "id": 3, "name": "Bob", "age": 40, "gender": "male" } ] ``` 在后台,你可以将数据查询出来,然后转换成json格式,最后返回给前端。如果你使用Java语言,可以使用Gson库将对象转换成json字符串,例如: ```java List<User> userList = userService.getUserList(); Gson gson = new Gson(); String json = gson.toJson(userList); return json; ``` 这里假设User是一个JavaBean类,包含了用户的id、姓名、年龄和性别等属性。getUserList()方法返回一个包含了多个User对象的集合。toJson()方法将集合转换成json字符串。最后在Controller中将json字符串返回给前端即可。 在前端,你需要在bootstrapTable的配置中指定数据来源,例如: ```javascript $('#table').bootstrapTable({ url: '/user/list', // 后台返回json数据的url method: 'get', pagination: true, sidePagination: 'client', columns: [ { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'gender', title: '性别' } ] }); ``` 这里的url指定了后台返回json数据的url,method指定了请求方法(get或post),pagination指定了是否启用分页功能,sidePagination指定了分页方式(client或server),columns指定了表格的列名和对应的json属性名。 当bootstrapTable加载完成后,会向后台发送一个get请求,后台返回json数据。bootstrapTable根据配置将json数据解析成表格展示出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值