bootstrapTable 后端分页

 $('#table').bootstrapTable({
        //ajax:tableAjax,                    //使用ajax请求
        // data: localdata,
        url: '/wz_info/' + type,
        method: 'GET', //请求方式(*)
        // toolbar: '#toolbar',                //工具按钮用哪个容器
        queryParams: function (params) {
          console.log("params", params)
          //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
          var temp = {
            sortType: 'id',
            pageSize: '10',
            pageCurrent: $('#table').bootstrapTable('getOptions').pageNumber,
            // rows: params.limit,                         //页面大小
            // page: (params.offset / params.limit) + 1,   //页码
            // sort: params.sort,      //排序列名  
            // sortOrder: params.order //排位命令(desc,asc) 
          };
          return temp; //JSON.stringify(temp);
        },

        responseHandler: function (data) {
          console.log('datadata', data[data.length - 1]); //var newArr=arr.slice(1,3);
          return {
            total: data[data.length - 1]['count(*)'],
            rows: data.slice(0, data.length - 1)
          };
        },
        toolbar: '#tableToolbar', //工具按钮用哪个容器

        cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        pagination: true, //是否显示分页(*)
        sortable: false, //是否启用排序
        pageSize: 10, //每页的记录行数(*)
        clickToSelect: true, // 单击行即可以选中
        sidePagination: 'server', //server:服务器端分页|client:前端分页
        pageList: [10, 20, 30, 50], //可供选择的每页的行数(*)
        smartDisplay: false,
        search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
        strictSearch: false,
        showColumns: true, //开启自定义列显示功能
        uniqueId: "id", //每一行的唯一标识,一般为主键列
        dataField: 'rows',
        clickToSelect: true,

        columns: [ //列设置
          {
            checkbox: true,
            width: '50%',
          },
          {
            field: 'DATE',
            title: '时间'
          },
          {
            field: 'X',
            title: 'X坐标'
          },
          {
            field: 'Y',
            title: 'Y坐标'
          },
          {
            field: 'Z',
            title: 'Z坐标'
          },
          {
            field: 'ENERGY',
            title: '能量'
          },
          {
            title: '操作',
            formatter: actionFormatter
          }
        ]
      });

主要不同的代码如下:

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

期待mizi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值