如何实现bootstrap-table的后端分页功能实例代码？

本文共计360个文字，预计阅读时间需要2分钟。

Bootstrap-table后端分页功能示例：Bootstrap-table是一个基于Bootstrap的前端表格插件，支持后端分页功能。以下是一个简单的示例：

使用Bootstrap-table实现后台分页：

1.插件资源点击此处

2.下载并引入插件

3.添加CSS样式链接

4.创建表格元素

5.初始化表格

javascript$('#table').bootstrapTable({ url: 'your_data_url', // 数据源URL pagination: true, // 开启分页 pageSize: 10, // 每页显示行数 columns: [ { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' } ]});

本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考，具体如下：

使用bootstrap-table实现后台分页

插件资源点击此处本站下载。

引用以下css

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

引用以下js

<script src="../plugins/jQuery/jquery-1.12.4.min.js"></script> <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>

html

<table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" > </table>

js代码

$(function () { //初始化表格 var oTable = new TableInit(); oTable.Init(); }); function TableInit() { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#userTable').bootstrapTable({ url: tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。