thinkphp5使用bootstrap实现分页功能(php实现分页功能)

thinkphp5使用bootstrap实现分页功能(php实现分页功能)

这是在tp5.0的基础上使用bootstrap的分页和表格实现的，废话不多说直接上代码：

//这是前端展示代码
<div class="example-wrap">
     <div class="example">
         <table id="cusTable">
             <thead>
             <th data-field="id">图片ID</th>
             <th data-field="name">图片标题</th>
             <th data-field="type_name">类别</th>
             <th data-field="add_time">添加时间</th>
             <th data-field="operate">操作</th>
             </thead>
         </table>
     </div>
 </div>

<script src="__JS__/jquery.min.js?v=2.1.4"></script> // 这些js自己找度娘要
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
<script src="__JS__/content.min.js?v=1.0.0"></script>
<script src="__JS__/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="__JS__/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="__JS__/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    function initTable() {
        $('#cusTable').bootstrapTable('destroy');
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "{:url('picture/index')}", //获取后台请求数据的地址
            striped: true,  //表格条纹
            pagination: true, //启动分页
            pageSize: 10,  //每页显示的记录数
            pageNumber:1, //当前第几页
            pageList: [5, 10, 15, 20, 25],  //记录数可选列表
            sidePagination: "server", //表示服务端请求
            paginationFirstText: "首页",
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            paginationLastText: "尾页",
            queryParamsType : "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    name:$('#name').val()
                };
                return param;
            },
            onLoadSuccess: function(res){  //网站加载时执行
                if(111 == res.code){
                    window.location.reload();
                }
                layer.msg("加载成功", {time : 1000});
            },
            onLoadError: function(){  //加载失败时执行
                layer.msg("加载数据失败");
            }
        });
    }

    $(document).ready(function () {
        //初始化bootstrap表格
        initTable();
    });
</script>

//这是php后端的代码
namespace app\admin\controller;
use app\admin\model\PictureModel;

class Picture extends Base
{
    // 图片列表
    public function index()
    {
        if(request()->isAjax()){
            
            $param = input('param.');

            $limit = $param['pageSize'];
            $offset = ($param['pageNumber'] - 1) * $limit;

            $where = [];
            $type = new TypeModel();   
            $picture = new PictureModel();
            $selectResult = $picture->getPictureByWhere($where, $offset, $limit);
            
            $return['total'] = $picture->getAllPictureCount();  // 总数据
            $return['rows'] = $selectResult;

            return json($return);
        }
        
        return $this->fetch();
    }
}

//这是php后端picture模块的代码
namespace app\admin\model; 

use think\Model;

class PictureModel extends Model
{
    // 确定链接表名
    protected $name = 'picture';

    /**
     * 后端搜索条件获取图片列表信息
     */
    public function getPictureByWhere($where, $offset, $limit)
    {
        return $this->where($where)->limit($offset, $limit)->order('sort')->select();
    }
  }