Bootstrap table 分页,排序,搜索 记录

前端框架:Bootstrap table 分页,排序,搜索 记录

2016-06-08 16:14:50 13005浏览 1评论

做CRM或其他后台系统 ,必需至少掌握一个前端框架。
之前学习使用EASYUI写了一个小系统 ,感觉还蛮好用的,就是外观不太好看。
所以现在学习主流的响应式框架 Bootstrap。感觉外观还真是变好看的~哈

1.引用JS 使用的是 bootstrap-3.3.5-dist
2.引用table插件 bootstrap-table.js(谷歌搜索下就有~)
3.引用paginator插件 bootstrap-paginator.js(谷歌搜索下就有~)

前端代码如下:


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TableTest2</title>
    <link href="~/Content/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Content/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <script src="~/Content/bootstrap-table/bootstrap-paginator.js"></script>
    <script src="~/Content/bootstrap-table/bootstrap-table-zh-CN.js"></script>
</head>
<body>

    <table id="test-table" class="col-xs-12" data-toolbar="#toolbar"></table>

    <script type="text/javascript">

        $(document).ready(function () {

            initTable();

        })

        function initTable() {
            $('#test-table').bootstrapTable({
                method: 'post',
                toolbar: '#toolbar',    //工具按钮用哪个容器
                striped: true,      //是否显示行间隔色
                cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,     //是否显示分页(*)
                sortable: true,      //是否启用排序
                sortOrder: "ID asc",     //排序方式
                pageNumber: 1,      //初始化加载第一页,默认第一页
                pageSize: 12,      //每页的记录行数(*)
                pageList: [20, 50, 100, 150],  //可供选择的每页的行数(*)
                url: "/home/tablePost3",//这个接口需要处理bootstrap table传递的固定参数
                queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
                // 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber

                //queryParams: queryParams,//前端调用服务时,会默认传递上边提到的参数,如果需要添加自定义参数,可以自定义一个函数返回请求参数
                sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*)
                //search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                strictSearch: true,
                //showColumns: true, //是否显示所有的列
                //showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2,    //最少允许的列数
                clickToSelect: true,    //是否启用点击选中行
                searchOnEnterKey: true,
                search:true,
                columns: [
                 {
                    title: "ID",
                    field: "ID",
                    align: "center",
                    valign: "middle",
                    formatter: function (value, row, index) {
                        //通过formatter可以自定义列显示的内容
                        //value:当前field的值,即id
                        //row:当前行的数据
                        var a = '<a href="/home/edit?id='+value+'" >修改</a>';
                        return a;
                    }
                },
                {
                    title: "Sku",
                    field: "Sku",
                    align: "center",
                    valign: "middle",
                    sortable:true

                },
                {
                    title: "ProductName",
                    field: "ProductName",
                    align: "center",
                    valign: "middle"
                },
                {
                    title: "Price",
                    field: "Price",
                    align: "center",
                    valign: "middle"
                },
                    {
                        title: "Descrtiption",
                        field: "Descrtiption",
                        align: "center",
                        valign: "middle"
                    }

                ],
                pagination: true
            });
        }

    </script>

</body>
</html>

后端请求代码:


        [HttpPost]
        public JsonResult tablePost3(string searchText="",string sortName ="",string sortOrder="desc",int pageSize = 10, int pageNumber = 1)
        {

            //1.排序
            //2.字段排序 
            //3.搜索关键字

            var db = new QHC_IIMSContext();
            List<Models.Models.T_Product> proList = null;
            if (sortOrder == "desc")
            {
                //desc 降序
                proList = db.T_Product.OrderByDescending(t => t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
            }
            else
            {
                //asc 升序
                proList = db.T_Product.OrderBy(t => t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
            }

            //获取数据库总条数
            int total = db.T_Product.Count();

            //匿名list  可以筛
            var newList = proList.Select(t => new { ID = t.ID, Sku = t.Sku, ProductName = t.ProductName, Price = t.Price, Descrtiption = t.Descrtiption }).ToList();

            var json = new { total = total, rows = newList };

            return Json(json, JsonRequestBehavior.AllowGet);
        }

前端显示 时,注意JSON中的数据的大小写问题

点击排序SKU,提交请求
图片描述

返回结果:
图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Bootstrap Table 是一个基于 Bootstrap 框架的 jQuery 表格插件,它可以实现表格的分页功能。使用时只需要在表格中添加 "data-pagination" 属性,并设置 "true" 即可启用分页功能。如下代码所示: ```html <table data-toggle="table" data-pagination="true"> <!-- ... --> </table> ``` 默认情况下,每页显示 10 条数据,你可以通过修改 data-page-size 属性来更改每页显示的数据条数。 ```html <table data-toggle="table" data-pagination="true" data-page-size="5"> <!-- ... --> </table> ``` 你也可以通过修改 data-pagination-detail-h-align 和 data-pagination-detail-v-align 属性来改变分页栏的位置。 ```html <table data-toggle="table" data-pagination="true" data-pagination-detail-h-align="right" data-pagination-detail-v-align="bottom"> <!-- ... --> </table> ``` 除此之外,Bootstrap Table 还有很多其它强大的功能,例如排序搜索、导出等。 ### 回答2: Bootstrap Table是一个基于Bootstrap框架的强大且易于使用的HTML表格插件。Bootstrap Table可用于展示各种类型的数据,并且可以与丰富的插件进行结合使用来实现各种功能,如数据搜索排序分页等。 Bootstrap Table提供了自带的分页功能,可用于在数据量较大时分页显示数据,提高用户浏览数据的效率。使用Bootstrap Table分页功能,需要引入相应的JavaScript文件和CSS文件,并调用相应的函数来实现。 在使用Bootstrap Table分页功能时,需要注意以下几点: 1. 设置表格的数据源:在使用Bootstrap Table分页功能时,首先需要将表格的数据源进行设置,即使用data选项传入数据。可以将数据源从后台获取或者直接在前端进行设置。示例代码如下: ```javascript var data = [ {"id": 1, "name": "张三", "gender": "男", "age": 20}, {"id": 2, "name": "李四", "gender": "女", "age": 22}, {"id": 3, "name": "王五", "gender": "男", "age": 24}, {"id": 4, "name": "赵六", "gender": "女", "age": 26}, {"id": 5, "name": "钱七", "gender": "男", "age": 28}, {"id": 6, "name": "孙八", "gender": "女", "age": 30}, {"id": 7, "name": "周九", "gender": "男", "age": 32}, {"id": 8, "name": "吴十", "gender": "女", "age": 34}, ]; $(function () { $('#table').bootstrapTable({ data: data }); }); ``` 2. 设置分页插件:在使用Bootstrap Table分页功能时,需要在页面中引入相应的分页插件,如bootstrap-table-pagination、bootstrap-table-mobile-pagination等。需要设置相应的参数,如pageNumber、pageSize等。示例代码如下: ```javascript $(function () { $('#table').bootstrapTable({ data: data, pagination: true, pageNumber: 1, pageSize: 3, pageList: [3, 6, 9], sidePagination: "client", paginationPreText: "上一页", paginationNextText: "下一页", paginationFirstText: "首页", paginationLastText: "尾页", }); }); ``` 在以上代码中,pagination选项设置为true时开启表格的分页功能,pageNumber和pageSize分别设置当前页码和每页显示的数据条数,pageList设置每页显示的数据条数选项,sidePagination设置数据的来源为前端,paginationPreText、paginationNextText、paginationFirstText、paginationLastText分别设置分页控件的上一页、下一页、首页、尾页显示的文本。 3. 设置自定义分页插件:在某些情况下,Bootstrap Table自带的分页插件无法满足需求,需要使用自定义分页插件。自定义分页插件需要写入JavaScript文件,并在页面中引入。示例代码如下: ```javascript (function ($) { 'use strict'; $.extend($.fn.bootstrapTable.defaults, { pagination: true, pageList: [10, 20, 50, 100], pageSize: 10, pageNumber: 1, paginationHAlign: 'left', paginationVAlign: 'bottom', paginationDetailHAlign: 'left', search: false, searchOnEnterKey: false, strictSearch: false, showHeader: true, showColumns: false, showRefresh: false, showFullscreen: false, showExport: false, smartDisplay: true, escape: false, filter: false, height: undefined, undefinedText: '-', uniqueId: undefined, cardView: false, detailView: false, trimOnSearch: true, clickToSelect: false, ignoreClickToSelectOn: function ($element) { return $element.is('a, button') || $element.parents('a, button').length > 0; }, singleSelect: false, toolbar: undefined, toolbarAlign: 'left', buttonsAlign: 'right', iconsPrefix: 'glyphicon', icons: { paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down', paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', refresh: 'glyphicon-refresh icon-refresh', toggle: 'glyphicon-list-alt icon-list-alt', columns: 'glyphicon-th icon-th', detailOpen: 'glyphicon-plus icon-plus', detailClose: 'glyphicon-minus icon-minus' }, iconSize: undefined, columns: [[]], data: [], ajax: undefined, ajaxOptions: {}, queryParams: function (params) { return params; }, queryParamsType: 'limit', responseHandler: function (res) { return res; }, totalField: 'total', totalNotFilteredField: 'totalNotFiltered', dataField: 'rows', detailFormatter: function (index, row) { return ''; }, paginationPreText: '‹', paginationNextText: '›', paginationFirstText: '«', paginationLastText: '»', paginationHAlign: 'right', paginationVAlign: 'bottom', paginationDetailHAlign: 'left', paginationShowPageGo: false, searchAlign: 'right', searchTimeOut: 500, searchText: '', searchOnEnterKey: false, strictSearch: false, searchSelector: false, showButtonIcons: true, showButtonText: false, showSearchButton: false, showSearchClearButton: false, trimOnSearch: true, escape: false, filterOptions: { filterAlgorithm: 'and' }, }); $.fn.bootstrapTable.locales['zh-CN'] = { formatLoadingMessage: function () { return '正在努力地加载数据,请稍候……'; }, formatRecordsPerPage: function (pageNumber) { return '每页 ' + pageNumber + ' 条数据'; }, formatShowingRows: function (pageFrom, pageTo, totalRows) { return '第 ' + pageFrom + ' 到第 ' + pageTo + ' 条,共 ' + totalRows + ' 条数据'; }, formatSearch: function () { return '搜索'; }, formatRefresh: function () { return '刷新'; }, formatToggle: function () { return '切换'; }, formatColumns: function () { return '列'; }, formatMultipleSort: function () { return '多列排序'; }, formatAddLevel: function () { return '添加一级'; }, formatDeleteLevel: function () { return '删除'; }, formatClear: function () { return '清空'; }, formatExport: function () { return '导出数据'; }, formatFilterControlSwitch: function () { return '隐藏/显示'; }, formatFilterControlSwitchHide: function () { return '隐藏'; }, formatFilterControlSwitchShow: function () { return '显示'; } }; $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']); var BootstrapTable = $.fn.bootstrapTable.Constructor, _initPagination = BootstrapTable.prototype.initPagination; BootstrapTable.prototype.initPagination = function () { _initPagination.apply(this, Array.prototype.slice.apply(arguments)); var html = []; html.push('<ul class="pagination pagination-sm" style="margin-top: 15px;">'); html.push('<li class="page-item"><a class="page-link" href="javascript:void(0);">' + this.options.paginationPreText + '</a></li>'); html.push('<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>'); html.push('<li class="page-item"><a class="page-link" href="javascript:void(0);">' + this.options.paginationNextText + '</a></li>'); html.push('</ul>'); this.$pagination = $(html.join('')).appendTo(this.$toolbar); }; })(jQuery); ``` 以上代码是一个自定义的分页插件,将分页控件改为简洁的样式,方便用户操作。自定义插件中的细节根据需求具体定制。 通过上述几点的设置,即可在Bootstrap Table中实现分页功能,提高用户体验,优化数据展示。 ### 回答3: Bootstrap Table 是一款用于显示表格数据的jQuery插件,它具有响应式布局、可排序、可搜索分页以及支持多种数据源的优点,因此被广泛应用在各种网站之中。而其中使用分页功能是非常常用的,因为不使用分页的话,当数据量大的时候,会导致页面加载缓慢,用户体验不好。 Bootstrap Table 分页功能的实现非常简单,它内置了调用分页插件的API,我们只需要通过一些配置选项即可使用。具体来说,我们需要在表格初始化时,配置以下属性: 1. 设置 pagination 属性为 true,表示启用分页功能。 2. 设置 pageSize 属性为每一页显示的数据条数,比如设置为 10 表示每页显示 10 条数据。 3. 配置 pageList 属性,表示分页的页码数量,在表格底部会显示对应的页码导航条。 除此之外,还可以设置 queryParamsType 属性,来设置请求时的参数格式,具体包括 'limit' 和 'offset' 两种格式,根据后台的接口要求来进行设置。同时,可以使用 onPageChange 回调函数,在分页切换时从后台获取数据,并更新表格数据。 分页功能的实现对于展示大量数据是非常必要的,通过分页,可以保证页面的加载速度及用户的体验,而Bootstrap Table提供了简单易用的API,使得分页功能的实现变得异常容易。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值