正文

bootstrap-table+thinkphp实现server分页

HULANG-BTB  2022-02-12  746

关键词：

界面需要：此处不提供文件下载，请自行到官网下载。

<link href="./css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css" />

<script src="./js/bootstrap.min.js" type="text/javascript"></script>
<script src="./js/plugins/bootstrap-table/bootstrap-table.min.js" type="text/javascript"></script>
<script src="./js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>

前端html代码：

<table id="table"></table>

前端JavaScript:代码

  $(‘#table‘).bootstrapTable({
          url: "./infolist", //请求地址
          method: ‘GET‘, //请求
          striped: true,
          cache: false,
          pagination: true,
          sortable: true,
          showHeader : true,
          showRefresh: true,
          clickToSelect: true,
          search: false,
          sidePagination: "server", //客户端client   服务端server
          pageNumber: 1,
          pageList: [10, 15],
          queryParams: function (params) {
              return {
                offset: params.offset,  //页码
                limit: params.limit,   //页面大小
            };
          },
          columns: [{
              field: ‘id‘,
              title: ‘应用ID‘,
              width: ‘10%‘,
          }, {
              field: ‘name‘,
              title: ‘应用名称‘,
          },  {
              field: ‘type‘,
              title: ‘类型‘,
              width: ‘10%‘,
          },  {
              field: ‘status‘,
              title: ‘状态‘,
              width: ‘10%‘,
          }, {
              field: ‘xznum‘,
              title: ‘下载量‘,
              width: ‘10%‘,
          }, {
              field: ‘phnum‘,
              title: ‘排序号‘,
              width: ‘10%‘,
          }],
      });

后端Thinkphp处理：

$limit = trim(I(‘get.limit‘));
$offset = trim(I(‘get.offset‘));
$page = floor($offset / $limit) + 1;
# 获取并且计算 页号 分页大小

$list = M(‘table‘)->where([‘id‘=>1])->page($page,$limit)->select();
# 查询相关数据
$count = M(‘table‘)->where([‘id‘=>1])->count();
# 查询数据条数

$ret = [
        ‘total‘ => $list,
        ‘rows‘ => $count,
    ];
# 构造返回数据类型
$this->ajaxReturn($ret);
# 返回JSON数据

bootstrap-table

Bootstrap-Table的使用相关的技术文档和资料相关类文件的引入代码初始化相关的技术文档和资料Bootstrap中文网：http://www.bootcss.com/BootstrapTableDemo：http://issues.wenzhixin.net.cn/bootstrap-table/index.htmlBootstrapTableAPI：http://bootstrap-ta 查看详情

bootstrap-table学习

参考学习 http://bootstrap-table.wenzhixin.net.cn/getting-started/包括Bootstrap库（如果你的项目没有使用它）和bootstrap-table.csshead标签你的html文档。<linkrel="stylesheet"href="bootstrap.min.css"><linkrel="styleshee 查看详情

bootstrap-table的使用

一：相关技术文档和链接Bootstrap中文网：http://www.bootcss.com/BootstrapTableDemo：http://issues.wenzhixin.net.cn/bootstrap-table/index.htmlBootstrapTableAPI：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation 查看详情

bootstrap-table表格导出

在bootstrap-table官网-》拓展模块中有导出模块的详细介绍。网址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/点击home按钮进入github官方文档，会看到导出使用的插件是bootstrap-table-export.js ，而这个插件中使用的是tableExport.jquery... 查看详情

bootstrap-table简单使用

开发项目时总想着能不能有一款插件包含分页，查询等常用功能，后来发现了bootstrap-table直接看代码和效果图 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>bootstrap-table</title><scriptsrc 查看详情

fastadmin中bootstrap-table列宽控制

FastAdmin中Bootstrap-Table列宽控制使用css控制1使用formatter处理2http://issues.wenzhixin.net.cn/bootstrap-table/#options/table-style.html?https://blog.csdn.net/py245164372/article/details/72907521? 查看详情

bootstrap-table搜索框以及下方页码乱码问题解决

图1图2问题如上图1,2，原因是这两个包的导入顺序<scriptsrc="../js/bootstrap-table/bootstrap-table.js"></script><scriptsrc="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>交换：<scrip 查看详情

Bootstrap-table : 中文文本

】Bootstrap-table:中文文本【英文标题】：Bootstrap-table:textinChinese【发布时间】：2015-05-2002:19:37【问题描述】：我在我的一个网页中使用引导表。引导表：link我有一个有趣的小问题：如您所见，boostrap表格文本是中文的。如何更改语... 查看详情

bootstrap-table的一些参数配置

bootstrap-table的一些配置参数[html]viewplaincopy$(‘#reportTable‘).bootstrapTable({method:‘post‘,url:‘/qStock/AjaxPage‘,dataType:"json",striped:true,//使表格带有条纹pagination:true,//在表格底部显示分页工具栏pageSize:22,pageNumb 查看详情

Bootstrap-table 动态改变表格高度

】Bootstrap-table动态改变表格高度【英文标题】：Bootstrap-tablechangedynamicallytableheight【发布时间】：2015-04-0711:48:09【问题描述】：我在1.6版中使用Bootstrap-table插件。我想动态更改表格高度-有可能吗？我不知道该怎么做...<divclass="ma... 查看详情

Bootstrap-table 使用 Firebase 实时数据库显示“No matching records found”和 bootstrap-table 中的记录

】Bootstrap-table使用Firebase实时数据库显示“Nomatchingrecordsfound”和bootstrap-table中的记录【英文标题】：Bootstrap-tabledisplaysboth"Nomatchingrecordsfound"andRecordsinbootstrap-tablewithFirebaserealtimedatabase【发布时间】：2021-07-3010: 查看详情

Bootstrap-table：服务端分页+nextPage方法

】Bootstrap-table：服务端分页+nextPage方法【英文标题】：Bootstrap-table:ServerSidepagination+nextPagemethod【发布时间】：2018-04-2903:09:52【问题描述】：我正在使用Django和应用程序Bootstrap-table来正确格式化我的表格。我有很多数据，所以我使... 查看详情

bootstrap-table (wenzhixin) --> Ajax 的数据

】bootstrap-table(wenzhixin)-->Ajax的数据【英文标题】：bootstrap-table(wenzhixin)-->DatabyAjax【发布时间】：2017-08-0803:41:53【问题描述】：我想使用wenzhixin(http://bootstrap-table.wenzhixin.net.cn/)的引导表库，但我的技能似乎还不够好，无法运行... 查看详情

bootstrap-table教程演示

BootstrapAdmin效果展示TableofcontentsCreateRemoveUpdateExportTreeCreate相关插件bootstrap-validator演示Remove相关插件bootstrap-multiselectbootstrap-table演示Update相关插件bootstrap-tablebootstrap-editablebootstrap-table-e 查看详情

bootstrap-table自己配置

function initTable(){ var methodNameSearch=$("#methodNameSearch").val(); var requestUrl = "/manage/json/v 查看详情

bootstrap-table前端修改数据

　　使用bootstrap-table显示数据，后台传回数据以后，可能需要对其做调整，如需要前端为数据添加单位调整数据代码$("#"+tableId).bootstrapTable({dataType:"json",method:‘get‘,contentType:"application/x-www-form-urlencoded",cache:false,url:url,sortName:so 查看详情

bootstrap-table - 如何设置表格行背景颜色

】bootstrap-table-如何设置表格行背景颜色【英文标题】：bootstrap-table-howtosettablerowbackgroundcolor【发布时间】：2018-08-0115:00:56【问题描述】：我正在使用引导表。如果我在style属性中设置颜色，它会被bootstrap-table删除，所以我所做的... 查看详情

bootstrap-table行内编辑

所需的样式和js文件： https://pan.baidu.com/s/1eSAKzyM密码:s3wh参考： http://www.cnblogs.com/landeanfen/p/5005367.html columnsDefined() 处需要加行内编辑的可这么设置{title:‘备注‘,field:‘remark‘,formatter:function 查看详情