Bootstrap-Table中怎么实现分页和排序-创新互联

这篇文章给大家介绍Bootstrap-Table中怎么实现分页和排序，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

10年积累的成都做网站、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有桦南免费网站建设让你可以放心的选择与我们合作。

1、引用插件

按官网的Getting started引用该插件所必须的css和js文件，如下：

<link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css">

<script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="bootstrap-table.js"></script><-- put your locale files after bootstrap-table.js --><script src="bootstrap-table-zh-CN.js"></script>

2、建立Table

在HTML页面中建立一个用于展示数据的Table，这个Table在随后的步骤中将被Bootstrap-Table初始化，如下：

<table id="dataTable">    <thead>    <tr>        <th data-field="fullname" data-sortable="true">名称</th>        <th data-field="shortname" data-sortable="true">简称</th>        <th data-field="address" data-sortable="true">地址</th>        <th data-field="linkman" data-sortable="true">联系人</th>        <th data-field="tel" data-sortable="true">联系电话</th>        <th>操作</th>    </tr>    </thead>    <tbody id="dataBody">    </tbody></table>

3、初始化Table

使用Javascript将Table初始化，并且自定义一些函数来满足之前的需求，代码如下：

$(document).ready(function(){    initTable("dataTable");});//自定义ajaxfunction ajaxRequest(params){    //访问服务器获取所需要的数据    //比如使用$.ajax获得请求某个url获得数据    $.ajax({        type : 'post',        url : '/list.do',        data : parames.data,        success  : function(e){            if(e.code == 200){                //表格加载数据                parames.success({                    total : total,//符合查询条件的数据总量                    rows : [{}]//创建一个空行，此处要注意，如果去除，将不会显示任何行                });                //加载一个片段，形如<tr><td>..</td>...</tr><tr><td>..</td>...</tr>                $.ajax({                    type     : 'post',                    url      : '/body.do',                    data : parames.data,                    dataType : 'html',                    success  : function(e){                        $("#dataBody").html(e);                    }                });            }        }    });}//自定义参数function postQueryParams(params) {    params.cname = $("#customerName").val();    return params;}//初始化function initTable(tableId){    $("#" + tableId).bootstrapTable({        classes : "table table-bordered table-hover table-striped",//加载的样式        ajax : "ajaxRequest",//自定义ajax        search : false,//不开启搜索文本框        sidePagination : "server",//使用服务器端分页        pagination : "true",//开启分页        queryParams : "postQueryParams",//自定义参数        pageSize : 8,//每页大小        pageList : [8, 16, 32, 64]//可以选择每页大小    });}//查询时，先销毁，然后再初始化$("#btnSearch").click(function(){    $("#dataTable").bootstrapTable('destroy');    initTable("dataTable");});

关于Bootstrap-Table中怎么实现分页和排序就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前标题：Bootstrap-Table中怎么实现分页和排序-创新互联
本文地址：https://www.cdcxhl.com/article8/ecjip.html

成都网站建设公司_创新互联，为您提供微信小程序、动态网站、营销型网站建设、企业网站制作、网站设计公司、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容