2019-01-10 16:45:50 qq_42817051 阅读数 64
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11095 人正在学习 去看看 苏朝辉

使用BootStrap Table插件完成表格的展示

  • html页面的编写
    (1)js代码的编写
<script type="text/javascript">
        $(function () {
            var option={
                url:'json/user.json',
                pagination:true,//显示分页工具条
                sidePagination:"server",//client:服务端一次性把所有数据返回给客户端,客户端分页;“server”:服务端分页
                columns: [{
                    field: 'id',
                    title: '编号'//标题
                }, {
                    field: 'name',
                    title: '用户名'
                }, {
                    field: 'password',
                    title: '密码'
                } ]
            };

            $("#myTable").bootstrapTable(option);
        });

    </script>

(2)依赖的添加

<link rel="stylesheet" href="public/css/bootstrap.min.css">
    <script src="public/libs/jquery.min.js"></script>
    <script src="public/libs/bootstrap.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
  • json的形式传值

如果服务端分页:
插件自动会向服务端传递参数 offset 起始记录 limit 每页显示多少条
/data?serach=&order=asc&offset=&limit=10
服务器需要封装成如下格式的数据返回
total 总的记录数
rows 这一页的数据

{"total":18,
"rows":[{
"id": 1,
"name": "admin",
"password": "admin"
}, {
"id": 2,
"name": "jack",
"password": "jack"
},{
"id": 4,
"name": "rose",
"password": "rose"
},
{
"id": 4,
"name": "rose",
"password": "rose"
}]
}
2016-03-18 11:48:16 d0d0bird 阅读数 5823
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11095 人正在学习 去看看 苏朝辉

   这个插件捣腾了好久了终于调通了,记录一下

1.先引入相应的文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  <title>表格测试工具</title>

  <!-- Bootstrap -->
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="assets/css/bootstrap.css">

  <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="assets/js/jquery.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="assets/js/bootstrap.js"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="assets/css/bootstrap-table.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="assets/js/bootstrap-table.js"></script>

  <!-- Latest compiled and minified Locales -->
  <script src="assets/js/bootstrap-table-zh-CN.js"></script>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>
<body>
  <h1>你好ee,世界!</h1>
  <table id="table"></table>
  <table data-toggle="table"
       data-url="c.php"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true">
    <thead>
      <tr>
        <th data-field="id">Name</th>
        <th data-field="name">Stars</th>
        <th data-field="price">Forks</th>
        <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
      </tr>
    </thead>
  </table>
  <script>

$('#table').bootstrapTable({
    url: 'c.php',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }, ]
});


    function actionFormatter(value, row, index) {
    return [
        '<a class="like" href="javascript:void(0)" title="Like">',
        '<i class="glyphicon glyphicon-heart"></i>',
        '</a>',
        '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
        '<i class="glyphicon glyphicon-edit"></i>',
        '</a>',
        '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
        '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
}

window.actionEvents = {
    'click .like': function (e, value, row, index) {
        alert('You click like icon, row: ' + JSON.stringify(row));
        console.log(value, row, index);
    },
    'click .edit': function (e, value, row, index) {
        alert('You click edit icon, row: ' + JSON.stringify(row));
        console.log(value, row, index);
    },
    'click .remove': function (e, value, row, index) {
        alert('You click remove icon, row: ' + JSON.stringify(row));
        console.log(value, row, index);
    }
};

  </script>
</body>
</html>

以上要注意的是url是传的json格式的数据,例如c.php为

<?php

$rows=array('id'=>'one', 'name'=>'two', 'price'=>'three');
$row=array($rows);
echo encode_json($row);

#解决中文编码问题,先对需要处理的做urlencode处理,然后json_encode,最后做urldecode处理
	function encode_json($str) {  
	    return urldecode(json_encode(url_encode($str)));      
       }
	function url_encode($str) {  
	   if(is_array($str)) {  
	        foreach($str as $key=>$value) {  
                     $str[urlencode($key)] = url_encode($value);  
		}  
	   } else {  
	        $str = urlencode($str);  
		}  

	   return $str;  
       } 


?>
还有就是在加载表格选项的时候

在html中是

<table data-toggle="table"
       data-url="c.php"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true">
    <thead>
      <tr>
        <th data-field="id">Name</th>
        <th data-field="name">Stars</th>
        <th data-field="price">Forks</th>
        <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
      </tr>
    </thead>
  </table>
这样加载的。

在用js是

<table id="table"></table>
<pre name="code" class="javascript"> <script>


$('#table').bootstrapTable({
    url: 'c.php',
    search:'true',
    showRefresh:'true',
    showToggle:'true',
    showColumns:'true',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }, ]
});

  </script>



这样加载的。




在js中用的是‘名称’,而在html中用的是‘标签’。



2019-02-25 17:13:45 github_38336924 阅读数 884
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11095 人正在学习 去看看 苏朝辉

1、介绍

2、页面引用

<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">  

<!-- jquery及bootstrapjs -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 

<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> 

<!-- bootstrap-table-export数据导出---后面两个是Excel2007所需要的js -->
<script src="${basePath }/js/bootstrap-table-export.js"></script>
<script src="${basePath }/js/tableExport.min.js"></script>
<script src="${basePath }/js/xlsx.core.min.js"></script> 
<script src="${basePath }/js/FileSaver.min.js"></script

3、简单示例

  • 在HTML中定义一个table标签
<table id="table"></table>
  • 使用bootstrapTable有两种方法,第一通过data属性方法,因为不太灵活,不做过多演示
<table data-toggle="table" data-url="data1.json">
    <thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
    </thead>
</table>
$("#table").bootstrapTable({ // 对应table标签的id

    url: base_path + "/product/list",   //AJAX获取表格数据的url

    striped: true,                      //是否显示行间隔色(斑马线)

    pagination: true,                   //是否显示分页(*)

    sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)

    paginationLoop: false,      //当前页是边界时是否可以继续按

    queryParams: function (params) {    // 请求服务器数据时发送的参数,可以在这里添加额外的查询参数,返回false则终止请求

        return {

            limit: params.limit, // 每页要显示的数据条数

            offset: params.offset, // 每页显示数据的开始行号

            //sort: params.sort, // 要排序的字段

            //sortOrder: params.order, // 排序规则

            //dataId: $("#dataId").val() // 额外添加的参数

        }

    },//传递参数(*)

    pageNumber: 1,                       //初始化加载第一页,默认第一页

    pageSize: 10,                       //每页的记录行数(*)

    pageList: [10, 25, 50, 100, 'all'],  //可供选择的每页的行数(*)

    contentType: "application/x-www-form-urlencoded",//一种编码。在post请求的时候需要用到。这里用的get请求,注释掉这句话也能拿到数据

    //search: true,                     //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大

    strictSearch: false,        //是否全局匹配,false模糊匹配

    showColumns: true,                  //是否显示所有的列

    showRefresh: true,                  //是否显示刷新按钮

    minimumCountColumns: 2,             //最少允许的列数

    clickToSelect: false,               //是否启用点击选中行

    //height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度

    //uniqueId: "id",                   //每一行的唯一标识,一般为主键列

    showToggle: true,                    //是否显示详细视图和列表视图的切换按钮

    cardView: false,                    //是否显示详细视图

    detailView: false,                  //是否显示父子表

    cache: false,                       // 设置为 false 禁用 AJAX 数据缓存, 默认为true

    sortable: true,                     //是否启用排序

    sortOrder: "asc",                   //排序方式

    sortName: 'sn', // 要排序的字段

    columns: [

        {

            field: 'sn', // 返回json数据中的name

            title: '订货号', // 表格表头显示文字

            align: 'center', // 左右居中

            valign: 'middle' // 上下居中

        }, {

            field: 'productname',

            title: '商品名称',

            align: 'center',

            valign: 'middle'

        }, {

            field: 'cost',

            title: '价格(¥)',

            align: 'center',

            valign: 'middle',

            sortable: true

        }, {

            field: 'brankname',

            title: '品牌',

            align: 'center',

            valign: 'middle',

        }, {

            field: 'specificationvalues',

            title: '规格',

            align: 'center',

            valign: 'middle',

        }, {

            field: 'areaname',

            title: '产地',

            align: 'center',

            valign: 'middle',

        }

    ],

    onLoadSuccess: function () {  //加载成功时执行

        console.info("加载成功");

    },

    onLoadError: function () {  //加载失败时执行

        console.info("加载数据失败");

    },
    
    //>>>>>>>>>>>>>>导出excel表格设置

    showExport: phoneOrPc(),              //是否显示导出按钮(此方法是自己写的目的是判断终端是电脑还是手机,电脑则返回true,手机返回falsee,手机不显示按钮)

    exportDataType: "basic",              //basic', 'all', 'selected'.

    exportTypes: ['excel', 'xlsx'],        //导出类型

    //exportButton: $('#btn_export'),     //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)

    exportOptions: {

        //ignoreColumn: [0,0],            //忽略某一列的索引  

        fileName: '数据导出',              //文件名称设置  

        worksheetName: 'Sheet1',          //表格工作区名称  

        tableName: '商品数据表',

        excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],

        //onMsoNumberFormat: DoOnMsoNumberFormat  

    }

    //导出excel表格设置<<<<<<<<<<<<<<<<
    
});

4、注意地方

  • 测试时分页先选择’client’,因为分页是客户端的话,导出数据会方便可以随意定义’basic’, ‘all’, ‘selected’.如果分页是服务端的话即使选择’all导出的也是当前页(‘basic’),如果想导出全部话,可以先将页面显示条目数为全部,再导出当前页即就是全部数据了.
  • 分页如果是服务端的话返回的json串必须包含2个数据,一个是total"即所有数据条数.另一个"rows"即"当前页"显示的内容.(见下图json串格式)
    在这里插入图片描述

5、演示图

在这里插入图片描述


作者:小流至江河
来源:CSDN
原文:https://blog.csdn.net/javayoucome/article/details/80081771
版权声明:本文为博主原创文章,转载请附上博文链接!

2017-08-17 13:52:00 universsky2015 阅读数 330
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11095 人正在学习 去看看 苏朝辉

Bootstrap 表格插件 BootstrapTable : jQuery.fn.bootstrapTable.defaults

表格参数说明文档:

表格的参数定义在 jQuery.fn.bootstrapTable.defaults

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#方法

2019-01-24 17:33:24 u010520146 阅读数 938
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    11095 人正在学习 去看看 苏朝辉

一.前言

在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本文介绍bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用,同时界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端。

Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、移动列位置等一些特殊的功能,插件可以用基于HTML5的data-*属性标识设置,也可以使用Javascript方式进行设置,非常方便。

官方详细文档教程: https://bootstrap-table.com/docs/getting-started/introduction/

二.实例分析

1.引入资源css,js
 <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://lib.baomitu.com/bootstrap-table/1.13.1/bootstrap-table.min.css">

    <!-- jQuery first, then Popper.js, then Bootstrap JS, and then Bootstrap Table JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.2/core.min.js"></script>
    <script src="https://lib.baomitu.com/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
    <script src="https://lib.baomitu.com/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- 引入layer -->
    <script type="text/javascript" src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
2.展示html
<div class="container">
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn  btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
        </div>
        <table id="table"></table>
    </div>
3.js代码
 <script type="text/javascript">
        $(function () {
            $('#table').bootstrapTable({
                url:'http://localhost:8015/pageList', //接口地址,注意:数据放在rows字段
                method: 'get',     //请求方式
                cache: false,      //是否使用缓存
                toolbar:'#toolbar',//工具按钮用哪个容器
                //height: 600,     //设置行高,没有设置的话,就默认取pageSize条数自适应
                striped: true,     //是否显示行间隔色
                strickSearch: true,
                sortOrder: "asc",   //排序方式
                sortable: true,   //是否启动排序
                queryParams:'',    //传递参数(*)
                jsonp: true,
                iconSize: 'outline',
                pagination: true,  //是否分页
                pageSize: 10,      //显示每页条数
                pageNumber:1,      //初始化加载第一页
                pageList: [10, 20, 50, 100, 200, 500],  //每页可显示的行数
                sidePagination:'client', //分页方式,采用  server  client
                search: true,      //是否搜索
                showColumns: true,  //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                showExport: true,
                exportTypes: ['csv','txt','xml'],
                clickToSelect: true, //是否启动点击选中行
                showToggle :true ,   //是否显示详细视图与列表视图
                uniqueId:"ID",       //每一行的唯一标识,一般为主键id
                cardView: false,      //是否显示详细视图
                columns: [
                    {
                        field:"checked",
                        checkbox:true
                    },
                    {
                        field:"id",
                        title:"编号ID",
                        align:"center",
                        valign:"middle",
                        sortable:"true"
                    },
                    {
                        field:"name",
                        title:"名称",
                        align:"center",
                        valign:"middle",
                        sortable:"true"
                    },
                    {
                        field:"description",
                        title:"描述",
                        align:"center",
                        valign:"middle",
                        sortable:"true"
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        align: 'center',
                        colspan: 1,
                        events: operateEvents,
                        formatter: operateFormatter
                    }
                ]
    //            data:datas,
            });
        });
        function operateFormatter(value, row, index) {
            return '' +
                    '<a class="edit" href="javascript:void(0)" data-toggle="modal" data-target="#editModal">' + '<i class="fa fa-edit">' + '</i>编辑</a>' + ' | ' +
                    '<a class="remove" href="javascript:void(0)"  title="Delete Item">' + '<i class="glyphicon glyphicon-remove-circle">删除' + '</i>' + '</a>'
                    ;
        };
        window.operateEvents = {
            'click .edit': function (e, value, row, index) {
                layer.msg("编辑:"+row.id);
            },'click .remove': function (e, value, row, index) {
                layer.msg("删除:"+row.id);
            },

        };
    </script>

接口数据 http://localhost:8015/pageList: 注意 客户端分页,需要指定数据字段为rows

{“errorCode”:0,“model”:null,“list”:null,“rows”:[{“id”:4,“name”:“名字1”,“description”:“描述1”},{“id”:5,“name”:“名字2”,“description”:“描述2”},{“id”:6,“name”:“名字3”,“description”:“描述3”},{“id”:7,“name”:“名字4”,“description”:“描述4”},{“id”:8,“name”:“名字5”,“description”:“描述5”},{“id”:9,“name”:“名字6”,“description”:“描述6”},{“id”:10,“name”:“名字7”,“description”:“描述7”},{“id”:11,“name”:“名字8”,“description”:“描述8”},{“id”:12,“name”:“名字9”,“description”:“描述9”},{“id”:13,“name”:“名字10”,“description”:“描述10”},{“id”:14,“name”:“名字11”,“description”:“描述11”},{“id”:15,“name”:“名字12”,“description”:“描述12”},{“id”:16,“name”:“名字13”,“description”:“描述13”},{“id”:17,“name”:“名字14”,“description”:“描述14”},{“id”:18,“name”:“名字15”,“description”:“描述15”},{“id”:19,“name”:“名字16”,“description”:“描述16”},{“id”:20,“name”:“名字17”,“description”:“描述17”},{“id”:21,“name”:“名字18”,“description”:“描述18”},{“id”:22,“name”:“名字19”,“description”:“描述19”},{“id”:23,“name”:“名字20”,“description”:“描述20”},{“id”:24,“name”:“名字21”,“description”:“描述21”},{“id”:25,“name”:“名字22”,“description”:“描述22”},{“id”:26,“name”:“名字23”,“description”:“描述23”},{“id”:27,“name”:“名字24”,“description”:“描述24”},{“id”:28,“name”:“名字25”,“description”:“描述25”},{“id”:29,“name”:“名字26”,“description”:“描述26”},{“id”:30,“name”:“名字27”,“description”:“描述27”},{“id”:31,“name”:“名字28”,“description”:“描述28”},{“id”:32,“name”:“名字29”,“description”:“描述29”},{“id”:33,“name”:“名字30”,“description”:“描述30”},{“id”:34,“name”:“名字31”,“description”:“描述31”},{“id”:35,“name”:“名字32”,“description”:“描述32”}]}

4.效果图

在这里插入图片描述

三.客户端分页和服务端分页的区别

当服务器没有对数据进行分页时,前端页面设计又要求进行分页,要分开来设置。

客户端分页:后台一次性将数据推送到前台,由前台代码负责分页、排序等;

responseHandler: function(data){
return data.response;
}

服务端分页:一次只传当前页的数据,点上一页或下一页时再以ajax方式获取所对应的数据;

sidePagination : “client”,
responseHandler: function(data){
return data.response.rows;
}

四.其他api

1.条件查询

指定查询条件 id=2 name=123

	var queryParams = {};
   	queryParams.id= '2';
   	queryParams.name= '123';
	
	var temp = {
        url: "/pageList",
        query: queryParams
    };
    $("#table").bootstrapTable('refresh', temp);
2.列表分条件显示

示例:如果字段为type的值为s则显示为管理员,如果是ss值则显示为店员

						{
                        field: 'type',
                        title: '身份级别',
                        align: 'center',
                        colspan: 1,
                        formatter: function (value, row, index) {
                            if (row.type == '0') {
                                value = "组长";
                            } else if (row.type == '1') {
                                value = "科长";
                            }
                            return value;
                        }
                    },

bootstrap表格使用

阅读数 101

没有更多推荐了,返回首页