精华内容
下载资源
问答
  • Bootstrap分页功能

    2017-08-18 13:27:00
    基于Bootsrap增加跳转页高亮功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <...

    基于Bootsrap增加跳转页高亮功能

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
        <script>
            
        var previousObj = null;
    
        $(document).ready(function(){
            var pageMax = 10;
            $("#pageIndex").append("<li οnclick=\"jumpToPage(this, -1)\"><a>&laquo;</a><li>");
            for(var i=1; i<pageMax+1; i++) {
                if(1==i) {
                    previousObj = $("#pageIndex").append("<li id='firstActive' οnclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>");
                }
                else {
                    $("#pageIndex").append("<li οnclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>");
                }
            }
            $("#pageIndex").append("<li οnclick=\"jumpToPage(this, 101)\"><a>&raquo;</a><li>");
            
            previousObj = $("#firstActive");
            $(previousObj).addClass("active");
        });
        
        function requestBlogs(start, end) {
            console.log("AJAX request");
        }
        
        function jumpToPage(obj, page) {
    
            console.log("Jump to page: " + page);
            $(previousObj).removeClass("active");
            $(obj).addClass("active");
            previousObj = obj;
            
            requestBlogs();
        }
        </script>
    
    </head>
    
    <body>
    
    <ul id="pageIndex" class="pagination"></ul>
    
    </body>
    </html>

     演示结果:

     

    转载于:https://www.cnblogs.com/folkzy/p/7389156.html

    展开全文
  • bootstrap实现分页

    2019-07-24 16:34:00
    【在查询数据的时候,使用了limit,现在,我固定每页显示3条记录,进行分页】 首先ajax向servlet发起请求,然后请求的数json数据。现在,开始设计ajax,html。 一、由于每次翻页,之前的数据都要被覆盖/清空。所以...

    算法改进:【主要使用js配合mysql的limit实现上一页,下一页】

    【在查询数据的时候,使用了limit,现在,我固定每页显示3条记录,进行分页】

    首先ajax向servlet发起请求,然后请求的数json数据。现在,开始设计ajax,html。

    一、由于每次翻页,之前的数据都要被覆盖/清空。所以使用div来包裹里面将被清空的内容。

    为什么要保留div内,因为我们还要向里面添加数据,保留他,类似于参照物。

    <div id="co">

            <h1 class="h"></h1>  <!-- 这里的标签都加上class="h",后面都要动态清空-->

    </div>

    现在,存放数据的地方有可基本设计框架,那么现在,是不是应该有一样东西来对数据进行操作呢,如:上一页,下一页。

    二、使用a标签,实现上一页,下一页功能。

    这里,我使用nextpage方法实现下一页,上一页使用prevpage。先有这样一个思路

    <a href="javascript:prevpage(0)">上一页</a><a href="javascript:nextpage(0)">下一页</a>

    既然如此,那么现在是实现数据加载的ajax了

    三、ajax实现初始加载、上一页、下一页。

    key表示第多少条记录数,即记录的起始数据,我们首先思考,当其他页面的操作改变时,上一页的参数和下一页的参数应该都会改变,随key而改变。

    大概如下:

    //1、默认加载第一页
    
    clickA(0);
    
    //2、加载数据的函数
    
    function clickA(key){
    
    $(".h").empty();
    $.ajax({
    type : "post",
    async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
    url : "Page", //请求发送到Page处
    data : {'key':key},
    dataType : "json", //返回数据形式为json
    success : function(result) {
    //请求成功时执行该函数内容,result即为服务器返回的json对象
    for(var k in result){
    //将获得的数据加入col-md-12 column
    $("#con").before("<h2 class='h'>"+result[k].title+"</2><p class='h'>"+result[k].name+"</p><p class='h'><a class='btn' href='javascript:clickA(0);'>View details »</a>"+"</p>");
    //改变a标签prev的属性,下面这两句是重点
    $("#prev").attr("href","javascript:prevpage("+key+")");
    
    $("#next").attr("href","javascript:nextpage("+key+")");
    
    } 
    },
    error : function(XMLHttpRequest, textStatus,errorMsg) {
    //请求失败时执行该函数
    alert("错误码:"+XMLHttpRequest.status);
    alert("错误状态:"+XMLHttpRequest.readyState);
    alert("数据请求数据失败!"+errorMsg);
    }
    });
    
    }
    
    //3、实现上一页功能:
    
    function prevpage(prev){
    
    if(prev==0){clickA(0);}else{
    prev = prev-3;
    clickA(prev);
    }
    
    //4、实现下一页功能
    
    var numa=0;
    
    function nextpage(numa){
    //获取当前的key 
    //将key+3,然后交给clickA
    //获取后台带到的key,在key的基础上增加
    numa=numa+3;
    clickA(numa);
    }
    
    }

    主要记录思想实现,代码有待优化,但思路已经很清晰,那么,以上是在确认每页显示3条数据,那么,要实现每页显示n条数据,该如何实现呢。想必不用多少了。

    那么随后,请自己思考,如何将这里提出的问题实现,同时打包成一个属于自己的东西呢?这个步骤就不写了。

    那么后台servlet如何控制,防止出现异常呢?那就是值的问题,凡是出现null或者"",或者<0等都将其值为0,这样就可以解决了。

    下一篇,是完整的例子。

    转载于:https://www.cnblogs.com/ciscolee/p/11239008.html

    展开全文
  • bootstrap分页

    2019-03-19 11:38:16
    在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,...

    转载自:https://www.cnblogs.com/wuhuacong/p/7284420.html

    在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、移动列位置等一些特殊的功能,插件可以用基于HTML5的data-*属性标识设置,也可以使用Javascript方式进行设置,非常方便。本篇随笔介绍bootstrap-table插件在我实际项目中的应用情况,总结相关使用中碰到的问题处理经验。

    1、Bootstrap-table资源及使用介绍

    在GitHub上Bootstrap-table的源码地址是:https://github.com/wenzhixin/bootstrap-table

    Bootstrap-table的文档地址:http://bootstrap-table.wenzhixin.net.cn/

    Bootstrap-table的各种样例:https://github.com/wenzhixin/bootstrap-table-examples

    Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式。

      所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出来,然后转换成JSON格式传到要显示的界面中,客户端模式较为简单,它是把数据一次性加载出来放到界面上,然后根据你设置的每页记录数,自动生成分页。当点击第二页时,会自动加载出数据,不会再向服务器发送请求。同时用户可以使用其自带的搜索功能,可以实现全数据搜索。对于数据量较少的时候,可以使用这个方法。

      所谓服务器模式,指的是根据设定的每页记录数和当前要显示的页码,发送数据到服务器进行查询,然后再显示到表格中。该方法可以根据用户的需要动态的加载数据,节省了服务器的资源,但是不能使用其自带的全数据搜索功能。

    Bootstrap-table是基于Boostrap开发的插件,因此使用的时候,需要引入Bootstrap的脚本和样式。

    如果我们项目中没有引入相关的文件,则需要引入这些样式和脚本文件,如下所示。

    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>

    不过以上内容,在我们开发项目的时候都肯定有的了,所以我们还是把中心放到使用这个插件所需要的引入文件上来。

    CSS文件引入

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

    脚本文件引入

    <script src="bootstrap-table.js"></script>
    <--汉化文件,放在 bootstrap-table.js 后面-->
    <script src="bootstrap-table-zh-CN.js"></script>

     一般来说我们如果是基于MVC开发的系统,CSS和JS的代码,都是放在BundleConfig.cs里面初始化的,如下所示

     

    bootstrap-table在页面中的使用,可以分为两种,一种是纯粹用HTML5的写法,通过data-*的方式指定各种属性设置,一种是HTML+JS方式实现弹性设置。

    如果我们采用HTML5标识的方式初始化HTML代码,则是下面的代码。

    复制代码

    <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>

    复制代码

    如果我们采用JS代码方式来初始化表格插件,那么只需要在HTML上声明一个表格对象即可,如下代码。

    <table id="table"></table>

    然后简单的JS代码初始化如下所示

    复制代码

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

    复制代码

    不过实际上我们使用 bootstrap-table的JS配置功能肯定比这个复杂很多,下面界面效果是实际表的数据展示。

     

    2、bootstrap-table的详细使用

    1)整个JS属性配置

    在上图中,我们是使用JS方式进行初始化表格内容的,JS代码如下所示

    复制代码

            var $table;
            //初始化bootstrap-table的内容
            function InitMainTable () {
                //记录页面bootstrap-table全局变量$table,方便应用
                var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
                $table = $('#grid').bootstrapTable({
                    url: queryUrl,                      //请求后台的URL(*)
                    method: 'GET',                      //请求方式(*)
                    //toolbar: '#toolbar',              //工具按钮用哪个容器
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                    pagination: true,                   //是否显示分页(*)
                    sortable: true,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                    pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录
                    pageSize: rows,                     //每页的记录行数(*)
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                    search: false,                      //是否显示表格搜索
                    strictSearch: true,
                    showColumns: true,                  //是否显示所有的列(选择显示的列)
                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: true,                //是否启用点击选中行
                    //height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                    uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
                    showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                  //是否显示父子表
                    //得到查询的参数
                    queryParams : function (params) {
                        //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                        var temp = {   
                            rows: params.limit,                         //页面大小
                            page: (params.offset / params.limit) + 1,   //页码
                            sort: params.sort,      //排序列名  
                            sortOrder: params.order //排位命令(desc,asc) 
                        };
                        return temp;
                    },
                    columns: [{
                        checkbox: true,  
                        visible: true                  //是否显示复选框  
                    }, {
                        field: 'Name',
                        title: '姓名',
                        sortable: true
                    }, {
                        field: 'Mobile',
                        title: '手机',
                        sortable: true
                    }, {
                        field: 'Email',
                        title: '邮箱',
                        sortable: true,
                        formatter: emailFormatter
                    }, {
                        field: 'Homepage',
                        title: '主页',
                        formatter: linkFormatter
                    }, {
                        field: 'Hobby',
                        title: '兴趣爱好'
                    }, {
                        field: 'Gender',
                        title: '性别',
                        sortable: true
                    }, {
                        field: 'Age',
                        title: '年龄'
                    }, {
                        field: 'BirthDate',
                        title: '出生日期',
                        formatter: dateFormatter
                    }, {
                        field: 'Height',
                        title: '身高'
                    }, {
                        field: 'Note',
                        title: '备注'
                    }, {
                        field:'ID',
                        title: '操作',
                        width: 120,
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    }, ],
                    onLoadSuccess: function () {
                    },
                    onLoadError: function () {
                        showTips("数据加载失败!");
                    },
                    onDblClickRow: function (row, $element) {
                        var id = row.ID;
                        EditViewById(id, 'view');
                    },
                });
            };

    复制代码

    上面JS代码的配置属性,基本上都加了注释说明,是比较容易理解的了。

    2)查询及分页

    这里的表格数据分页是采用服务器分页的方式,根据搜索条件从服务器返回数据记录的,并使用了排序的处理方式,这里的queryParams参数就是提交到服务器端的参数了

    复制代码

                    //得到查询的参数
                    queryParams : function (params) {
                        //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                        var temp = {   
                            rows: params.limit,                         //页面大小
                            page: (params.offset / params.limit) + 1,   //页码
                            sort: params.sort,      //排序列名  
                            sortOrder: params.order //排位命令(desc,asc) 
                        };
                        return temp;
                    },

    复制代码

    另外我们看到返回数据的URL地址接口是FindWithPager,我们来看看这个MVC控制器方法是如何处理数据返回的。

    复制代码

            /// <summary>
            /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
            /// </summary>
            /// <returns>指定对象的集合</returns>
            public override ActionResult FindWithPager()
            {
                //检查用户是否有权限,否则抛出MyDenyAccessException异常
                base.CheckAuthorized(AuthorizeKey.ListKey);
    
                string where = GetPagerCondition();
                PagerInfo pagerInfo = GetPagerInfo();
                var sort = GetSortOrder();
    
                List<TestUserInfo> list = null;
                if (sort != null && !string.IsNullOrEmpty(sort.SortName))
                {
                    list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
                }
                else
                {
                    list = baseBLL.FindWithPager(where, pagerInfo);
                } 
    
                //Json格式的要求{total:22,rows:{}}
                //构造成Json的格式传递
                var result = new { total = pagerInfo.RecordCount, rows = list };
                return ToJsonContent(result);
            }

    复制代码

    上面代码处理了两个部分的对象信息,一个是分页实体类信息,一个是排序信息,然后根据这些条件获取记录,返回类似

    {total:22,rows:{}}

    格式的JSON数据记录。

                var result = new { total = pagerInfo.RecordCount, rows = list };
                return ToJsonContent(result);

    获取分页的参数信息如下所示

    复制代码

            /// <summary>
            /// 根据Request参数获取分页对象数据
            /// </summary>
            /// <returns></returns>
            protected virtual PagerInfo GetPagerInfo()
            {
                int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
                int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
    
                PagerInfo pagerInfo = new PagerInfo();
                pagerInfo.CurrenetPageIndex = pageIndex;
                pagerInfo.PageSize = pageSize;
    
                return pagerInfo;
            }

    复制代码

    获取排序参数信息的代码如下所示

    复制代码

            /// <summary>
            /// 获取排序的信息
            /// </summary>
            /// <returns></returns>
            protected SortInfo GetSortOrder()
            {
                var name = Request["sort"];
                var order = Request["sortOrder"];
                return new SortInfo(name, order);
            }

    复制代码

    最后就是具体实现具体条件、具体页码、具体排序条件下的数据记录了,这部分可以根据自己的要求实现逻辑,这里只是给出一个封装好的处理调用即可。

    baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);

    实际情况下,我们列表的展示,一般需要使用不同的条件进行数据的查询的,虽然这个Bootstrap-table控件提供了一个默认的查询按钮,不过一般是在客户端分页的情况下使用,而且略显简单,我们一般使用自己查询条件进行处理,如下界面所示。

    或者如下的

    那么这样对于上面的js属性就需要调整下接受查询条件参数queryParams 了

    复制代码

                    //得到查询的参数
                    queryParams : function (params) {
                        //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                        var temp = {   
                            rows: params.limit,                         //页面大小
                            page: (params.offset / params.limit) + 1,   //页码
                            sort: params.sort,      //排序列名  
                            sortOrder: params.order //排位命令(desc,asc) 
                        };
                        return temp;
                    },

    复制代码

    对于自定义查询条件,我们可以用下面的常规方式增加参数,如下所示

     

    但是查询条件的参数我们不方便一一设置,我们想通过一种较为快捷的方式来处理,那么就需要对这个处理方式进行一个特别的修改了,首先添加一个扩展函数来处理表单的条件(参考博客http://www.cnblogs.com/zcsj/p/6635677.html的介绍)

    复制代码

            //自定义函数处理queryParams的批量增加
            $.fn.serializeJsonObject = function () {
                var json = {};
                var form = this.serializeArray();
                $.each(form, function () {
                    if (json[this.name]) {
                        if (!json[this.name].push) {
                            json[this.name] = [json[this.name]];
                        }
                        json[this.name].push();
                    } else {
                        json[this.name] = this.value || '';
                    }
                });
                return json;
            }

    复制代码

    然后我们就可以批量处理表单的查询条件了

    复制代码

                    queryParams : function (params) {
                        //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                        var temp = $("#ffSearch").serializeJsonObject();
                        temp["rows"] = params.limit;                        //页面大小
                        temp["page"] = (params.offset / params.limit) + 1;  //页码
                        temp["sort"] = params.sort;                         //排序列名
                        temp["sortOrder"] = params.order;                   //排位命令(desc,asc) 
    
                        //特殊格式的条件处理
                        temp["WHC_Age"] = $("#WHC_Age").val() + "~" + $("#WHC_Age2").val();
                        temp["WHC_BirthDate"] = $("#WHC_BirthDate").val() + "~" + $("#WHC_BirthDate2").val();
    
                        return temp;
                    },

    复制代码

    然后后端统一按照逻辑处理查询参数即可。

    3)格式化输出函数及其他

    对于上面JS的配置信息,我们再来回顾一下,例如对于数据转义函数,可以格式化输出的内容的,如下界面代码。

    格式化的数据转义函数如下,主要就是根据内容进行格式化输出的JS函数,好像是需要放在一个文件内。

    复制代码

            //连接字段格式化
            function linkFormatter(value, row, index) {                
                return "<a href='" + value + "' title='单击打开连接' target='_blank'>" + value + "</a>";
            }
            //Email字段格式化
            function emailFormatter(value, row, index) {
                return "<a href='mailto:" + value + "' title='单击打开连接'>" + value + "</a>";
            }
            //性别字段格式化
            function sexFormatter(value) {
                if (value == "女") { color = 'Red'; }
                else if (value == "男") { color = 'Green'; }
                else { color = 'Yellow'; }
    
                return '<div  style="color: ' + color + '">' + value + '</div>';
            }

    复制代码

    另外,我们看到行记录的最后增加了几个操作按钮,方便对当前记录的查看、编辑和删除操作,如下效果图所示。

    这部分我们也是通过格式化函数进行处理的

    复制代码

            //操作栏的格式化
            function actionFormatter(value, row, index) {
                var id = value;
                var result = "";
                result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
    
                return result;
            }

    复制代码

     如果我们需要双击弹出编辑界面的层,我们可以处理表格的双击事件,如下代码所示。

                    onDblClickRow: function (row, $element) {
                        var id = row.ID;
                        EditViewById(id, 'view');
                    },

    如果我们需要设置行的不同的样式展示,可以通过增加rowStyle的JS处理函数即可,如下代码所示

    复制代码

                    rowStyle: function (row, index) { //设置行的特殊样式
                        //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
                        var strclass = "";
                        if (index == 0) {
                            strclass = "warning";
                        }
                        return { classes: strclass }
                    }

    复制代码

     对于表格记录的获取,我们可以通过下面的代码进行获取:$table.bootstrapTable('getSelections')

                var rows = $table.bootstrapTable('getSelections');
                if (rows.length > 0) {
                    ID = rows[0].ID;
                }

    如果是多条记录的处理,例如删除记录

    复制代码

            //实现删除数据的方法
            function Delete() {
                var ids = "";//得到用户选择的数据的ID
                var rows = $table.bootstrapTable('getSelections');
                for (var i = 0; i < rows.length; i++) {
                    ids += rows[i].ID + ',';
                }
                ids = ids.substring(0, ids.length - 1);
    
                DeleteByIds(ids);
            }

    复制代码

    如果需要设置显示列显示,如下界面所示

    以及排序处理

    这些需要在JS代码开启相关的属性即可。

    还有就是一种CardView的卡片视图格式,如下所示。

    另外一种是父子表的展开明细的格式,如下所示

     以上就是bootstrap-table插件在我实际项目中的应用情况,基本上对JS各个属性的使用进行了一些介绍了,具体的应用我们可以参考它的文档,获取对应属性、方法、事件的详细说明,这样我们就可以更加详细的应用这个插件的各种功能了。

     http://bootstrap-table.wenzhixin.net.cn/documentation/

    希望上面的总结介绍对你使用bootstrap-table插件有所助益,感谢耐心阅读。

     

     相关主题文章如下所示:

    基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

    从开发框架提高开发效率说起 

    基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理

    基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2

    基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现

    基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式 

    基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理 

    在MVC控制器里面使用dynamic和ExpandoObject,实现数据转义的输出

    基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

    基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

    基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理 

    基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

    基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用 

    基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理 

    主要研究技术:代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发
    专注于Winform开发框架/混合式开发框架Web开发框架Bootstrap开发框架微信门户开发框架的研究及应用
      转载请注明出处:
    撰写人:伍华聪  http://www.iqidi.com 
        

    展开全文
  • bootstrap分页组件pagination是不支持跳转到任意页的,采用ajax后台真分页取数,增加跳转和页码、总页数功能
  • SpringBoot+PageHelper+Bootstrap+Thymeleaf 实现分页功能

    千次阅读 多人点赞 2019-04-08 14:53:30
    本文针对那种想要快速实现功能,而不是研究原理的...这种实际上就是单独使用分页插件来实现分页功能。好处是,分页条你可以自行排版,不受页面约束。(前端使用的是thymeleaf) 我使用的是spring boot 2.1.11.RELEA...

    本文针对那种想要快速实现功能,而不是研究原理的,那你就直接复制我的东西,运行就好。如果想深入学习的同学请另行百度。

    第一种 Spring Boot + Thymeleaf 使用PageHelper实现分页

    这种实际上就是单独使用分页插件来实现分页功能。好处是,分页条你可以自行排版,不受页面约束。(前端使用的是thymeleaf)

    我使用的是spring boot 2.1.11.RELEASE,如果按照以下步骤不能实现分页,那可能是pagehelper的版本问题,更换版本试一下。

    1.1 pom.xml

    首先在项目pom.xml中加入pagehelper插件的依赖

    <!--pagehelper分页插件 -->
    <dependency>
       <groupId>com.github.pagehelper</groupId>
       <artifactId>pagehelper-spring-boot-starter</artifactId>
       <version>1.2.5</version>
    </dependency>

    1.2 application.properties

    然后在springboot的application.properties配置文件中:

    (本人试了一下,这些属性可以不加,依然可以实现分页功能。最后还是写上吧。万一哪天炸了呢?)

    配置pageHelper分页插件的内容:

    pagehelper.helper-dialect=mysql
    pagehelper.reasonable=true
    pagehelper.support-methods-arguments=true
    pagehelper.params=count=countSql

    1.3 UserController

    想要实现功能,而不是研究怎么搞的,你就直接复制我的东西(不建议)

    /**
     *
     * @param model 携带数据返回
     * @param pageSize 一页显示多少条-非必传值
     * @param pageNum 显示当前页--必传值
     * @return 前端页面
     * @Author: Zoutao
     * @Date: 2018/12/6
     */
    //分页查询数据
    @GetMapping("/usermanage")
    public String usermanage(Model model,
                             @RequestParam(required = false,defaultValue="1",value="pageNum")Integer pageNum,
                             @RequestParam(defaultValue="5",value="pageSize")Integer pageSize){
    
        //为了程序的严谨性,判断非空:
        if(pageNum == null){
            pageNum = 1;   //设置默认当前页
        }
        if(pageNum <= 0){
            pageNum = 1;
        }
        if(pageSize == null){
            pageSize = 5;    //设置默认每页显示的数据数
        }
        System.out.println("当前页是:"+pageNum+"显示条数是:"+pageSize);
    
        //1.引入分页插件,pageNum是第几页,pageSize是每页显示多少条,默认查询总数count
        PageHelper.startPage(pageNum,pageSize);
        //2.紧跟的查询就是一个分页查询-必须紧跟.后面的其他查询不会被分页,除非再次调用PageHelper.startPage
        try {
            List<User> userList = userService.getAll();
            System.out.println("分页数据:"+userList);
            //3.使用PageInfo包装查询后的结果,5是连续显示的条数,结果list类型是Page<E>
            PageInfo<User> pageInfo = new PageInfo<User>(userList,pageSize);
            //4.使用model/map/modelandview等带回前端
            model.addAttribute("pageInfo",pageInfo);
        }finally {
            PageHelper.clearPage(); //清理 ThreadLocal 存储的分页参数,保证线程安全
        }
        //5.设置返回的jsp/html等前端页面
        // thymeleaf默认就会拼串classpath:/templates/xxxx.html
        return "admin/user/list";
    }

    重要提示:

    1. 只有紧跟在PageHelper.startPage()方法后的第一个Mybatis的查询(Select)方法会被分页。
    2. 请不要在系统中配置多个分页插件(使用Spring时,mybatis-config.xml和Spring配置方式,请选择其中一种,不要同时配置多个分页插件)!
    3. 对于带有for update的sql,会抛出运行时异常,对于这样的sql建议手动分页,毕竟这样的sql需要重视。
    4. 由于嵌套结果方式会导致结果集被折叠,因此分页查询的结果在折叠后总数会减少,所以无法保证分页结果数量正确。

    还有就分页插件支持以下几种调用方式(你任选),复制粘贴就好:

    //第一种,RowBounds方式的调用
    List<Country> list = sqlSession.selectList("x.y.selectIf", null, new RowBounds(0, 10));
     
    //第二种,Mapper接口方式的调用,推荐这种使用方式。
    PageHelper.startPage(1, 10);
    List<Country> list = countryMapper.selectIf(1);
     
    //第三种,Mapper接口方式的调用,推荐这种使用方式。
    PageHelper.offsetPage(1, 10);
    List<Country> list = countryMapper.selectIf(1);
     
    //第四种,参数方法调用
    //存在以下 Mapper 接口方法,你不需要在 xml 处理后两个参数
    public interface CountryMapper {
        List<Country> selectByPageNumSize(
                @Param("user") User user,
                @Param("pageNum") int pageNum,
                @Param("pageSize") int pageSize);
    }
    //配置supportMethodsArguments=true
    //在代码中直接调用:
    List<Country> list = countryMapper.selectByPageNumSize(user, 1, 10);
     
    //第五种,参数对象
    //如果 pageNum 和 pageSize 存在于 User 对象中,只要参数有值,也会被分页
    //有如下 User 对象
    public class User {
        //其他fields
        //下面两个参数名和 params 配置的名字一致
        private Integer pageNum;
        private Integer pageSize;
    }
    //存在以下 Mapper 接口方法,你不需要在 xml 处理后两个参数
    public interface CountryMapper {
        List<Country> selectByPageNumSize(User user);
    }
    //当 user 中的 pageNum!= null && pageSize!= null 时,会自动分页
    List<Country> list = countryMapper.selectByPageNumSize(user);
     
    //第六种,ISelect 接口方式
    //jdk6,7用法,创建接口
    Page<Country> page = PageHelper.startPage(1, 10).doSelectPage(new ISelect() {
        @Override
        public void doSelect() {
            countryMapper.selectGroupBy();
        }
    });
    //jdk8 lambda用法
    Page<Country> page = PageHelper.startPage(1, 10).doSelectPage(()-> countryMapper.selectGroupBy());
     
    //也可以直接返回PageInfo,注意doSelectPageInfo方法和doSelectPage
    pageInfo = PageHelper.startPage(1, 10).doSelectPageInfo(new ISelect() {
        @Override
        public void doSelect() {
            countryMapper.selectGroupBy();
        }
    });
    //对应的lambda用法
    pageInfo = PageHelper.startPage(1, 10).doSelectPageInfo(() -> countryMapper.selectGroupBy());
     
    //count查询,返回一个查询语句的count数
    long total = PageHelper.count(new ISelect() {
        @Override
        public void doSelect() {
            countryMapper.selectLike(country);
        }
    });
    //lambda
    total = PageHelper.count(()->countryMapper.selectLike(country));

    下面对最常用的方式进行详细介绍:

    使用这种调用方式时,你可以使用RowBounds参数进行分页,这种方式侵入性最小,我们可以看到,通过RowBounds方式调用只是使用了这个参数,并没有增加其他任何内容。

    分页插件检测到使用了RowBounds参数时,就会对该查询进行物理分页。
    关于这种方式的调用,有两个特殊的参数是针对 RowBounds 的,你可以参看上面

    还有PageHelper.startPage 静态方法调用+PageInfo的用法:代码中的1-3步,可以放到impl层写。反正就是在Dao层调用之前写就可以了。

    说一点:

    有人说PageHelper 是不安全的分页?
    实际上PageHelper 方法使用了静态的 ThreadLocal 参数,分页参数和线程是绑定的。
    只要你可以保证在 PageHelper 方法调用后紧跟 MyBatis 查询方法,这就是安全的。因为 PageHelper 在 finally 代码段中自动清除了 ThreadLocal 存储的对象。

    1.4 Service

    /**
         * 查询所有用户
         * @return
         */
        public List<User> getAll();

    1.5 Serviceimpl

    /**
         * 查询所有用户
         * @return
         */
        @Override
        public List<User> getAll() {
            return userMapper.getAll();
        }

    1.6 Dao层/mapper

    //查询所有用户
        @Select("SELECT * FROM tb_user")
        @ResultMap(value = "userMap")
        public List<User> getAll();

    就是一个查询所有数据的方法,然后接下来是前端页面,我使用的thymeleaf。实际上jsp也是可以的,只不过写的时候注意一些使用EL表达式。

    1.7 前端thymeleaf页面:

    就是用来显示分页信息的,展示一下pageInfo的属性,用的是BootStrap,记得引入js和css还有Bootstrap图标或字体核心文件

    <!--显示分页信息-->
    <div class="modal-footer no-margin-top">
        <div class="col-md-6">
            当前第 [[${pageInfo.pageNum}]]页,共 [[${pageInfo.pages}]] 页.一共 [[${pageInfo.total}]] 条记录
        </div>
    
        <ul class="pagination pull-right no-margin">
            <li th:if="${pageInfo.hasPreviousPage}">
                <a th:href="'/usermanage?pageNum=1'">首页</a>
            </li>
    
            <li class="prev" th:if="${pageInfo.hasPreviousPage}">
                <a th:href="'/usermanage?pageNum='+${pageInfo.prePage}">
                    <i class="ace-icon fa fa-angle-double-left"></i>
                </a>
            </li>
            <!--遍历条数-->
                <li th:each="nav:${pageInfo.navigatepageNums}">
                    <a th:href="'/usermanage?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
                    <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
                </li>
    
            <li class="next" th:if="${pageInfo.hasNextPage}">
                <a th:href="'/usermanage?pageNum='+${pageInfo.nextPage}">
                    <i class="ace-icon fa fa-angle-double-right"></i>
                </a>
            </li>
    
            <li>
                <a th:href="'/usermanage?pageNum='+${pageInfo.pages}">尾页</a>
            </li>
        </ul>
    </div>
    
    <div>当前页号:<span th:text="${pageInfo.pageNum}"></span></div>
    <div>每页条数:<span th:text="${pageInfo.pageSize}"></span></div>
    <div>起始行号:<span th:text="${pageInfo.startRow}"></span></div>
    <div>终止行号:<span th:text="${pageInfo.endRow}"></span></div>
    <div>总结果数:<span th:text="${pageInfo.total}"></span></div>
    <div>总页数:<span th:text="${pageInfo.pages}"></span></div>
    <hr />
    <div>是否为第一页:<span th:text="${pageInfo.isFirstPage}"></span></div>
    <div>是否为最后一页:<span th:text="${pageInfo.isLastPage}"></span></div>
    <div>是否有前一页:<span th:text="${pageInfo.hasPreviousPage}"></span></div>
    <div>是否有下一页:<span th:text="${pageInfo.hasNextPage}"></span></div>

    我把相关方法也写出来了,自己选择使用就好。

    运行项目看效果:

    这是使用的thymeleaf语法来集成PageHelper实现的分页,很多从JSP转thymeleaf的同学可以直接使用这个代码就好了。

    说明一点哈,这些都是需要引入CSS,js,jquery之类的,基本上版本通用的,PageHelper官网就有,不要不引入就来跟我说没有效果。

    PageHelper官网:https://pagehelper.github.io/docs/howtouse/

     

     

    第二种  页神器DataTables(通用版)

    下面介绍这个是DataTables表格组件,也是可以用来做分页的。前端分页也常用。也是需要快速实现功能的小伙伴直接复制粘贴就是。

    1.后台查询数据

    首先后台查询到数据,封装到map,传到jsp/html等页面。

    如图:

    2.前端页面Jsp遍历数据:

    记得使用EL表达式。

    可能在说的太快了,这里分解一下。

    3.在html/jsp页面的详细使用步骤:

    在你的项目中使用 DataTables,只需要引入三个文件即可,jQuery库,一个DT的核心js文件和一个DT的css文件,

    3.1.引入1个css+2个JavaScript

    源码:

    <!-- 分页查看 -->
    <link rel="stylesheet" type="text/css" href="resources/js/dataTable/jquery.dataTables.min.css">
    <script type="text/javascript" src="resources/js/dataTable/jquery.js"></script>
    <script type="text/javascript" src="resources/js/dataTable/jquery.dataTables.min.js"></script>

    3.2.在表格的地方添加class和id属性。(必须写thead,tbody)

    固定的class=“tablelist” id=“example”
    源码:

    <table cellspacing="0px" cellpadding="0px" border="1px" width="100%" class="tablelist" id="example">
    			<thead>
    				<tr>
    					<th>课程ID</th>
    					<th>课程名</th>
    					<th>方向</th>
    					<th>描述</th>
    					<th>时长(小时)</th>
    					<th>操作人</th>
    				</tr>
    			</thead>
    			
    <tbody>
    				<c:forEach items="${cList }" var="course">
    					<tr>
    						<td>${course.courseId }</td>
    						<td>${course.courseName }</td>
    						<td>${course.courseType }</td>
    						<td>${course.description }</td>
    						<td>${course.courseTime }</td>
    						<td>${course.operator }</td>
    					</tr>
    				</c:forEach>
    			</tbody>
    		</table>

    3.3.添加分页的script即可。

     

    <script type="text/javascript">
    		$(document).ready(function(){
    			$("#example").dataTable({
    				 "bProcessing" : true, //DataTables载入数据时,是否显示‘进度’提示
    				 "aLengthMenu" : [5, 10, 15], //更改显示记录数选项
    				 "sPaginationType" : "full_numbers", //详细分页组,可以支持直接跳转到某页
    				 "bAutoWidth" : true, //是否自适应宽度
    				 //"bJQueryUI" : true,
    				 "oLanguage": { //国际化配置  
    		                "sProcessing" : "正在获取数据,请稍后...",    
    		                "sLengthMenu" : "显示 _MENU_ 条",    
    		                "sZeroRecords" : "没有您要搜索的内容",    
    		                "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",    
    		                "sInfoEmpty" : "记录数为0",    
    		                "sInfoFiltered" : "(全部记录数 _MAX_ 条)",    
    		                "sInfoPostFix" : "",    
    		                "sSearch" : "搜索",    
    		                "sUrl" : "",    
    		                "oPaginate": {    
    		                    "sFirst" : "第一页",    
    		                    "sPrevious" : "上一页",    
    		                    "sNext" : "下一页",    
    		                    "sLast" : "最后一页"    
    		                }  
    		            },  
    		    });
    		});
    	</script>

    其他可以参考官网:http://www.datatables.club/example/diy.html

    一些属性参数说明:

    默认情况下 Datatables 的分页就是上一页、下一页和6个页数按钮,这适合大部分情况。
    不过也有用户不喜欢这样,Datatables提供了四个模式供用户选择,通过设置pagingType选项来配置。

    1. numbers - 只有只有数字按钮
    2. simple - 只有上一页、下一页两个按钮
    3. simple_numbers - 除了上一页、下一页两个按钮还有页数按钮,Datatables默认是这个
    4. full - 有四个按钮首页、上一页、下一页、末页
    5. full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮
    6. first_last_numbers - 除首页、末页两个按钮还有页数按钮

    还有一些常用操作:

    1.开启水平滚动条,设置scrollX选项 加入css样式 th, td { white-space: nowrap; } ,使文字内容在一行里,实现动态高度。

    2.通常你可能会想要你的表格跟着页面大小的变化而变化。下面的例子展示了,表格设置了width为100%,表格随着页面的大小变化自动适应。 Tips:试着改变浏览器窗口的大小看看效果

    3.可以使用language选项来国际化Datatables的相关信息

    3.4.点击行获取数据:

    (多写的取值例子,为了方便小伙伴们)

    $(document).ready(function() {
        var table = $('#example').DataTable();
        $('#example tbody').on('click', 'tr', function () {
            var data = table.row( this ).data();
            alert( 'You clicked on '+data[0]+'\'s row' );
        } );
    } );

    直接复制粘贴过去即可实现分页效果,而且还带有查询等功能。

    DataTables 默认情况已启用一些功能,搜索、 排序、 分页等功能已经开启。

    最后效果如下:

    上面就说完了这一种使用DataTables的分页方式。需要快速实现功能的,你就复制粘贴吧。
    也需要引入对应css、js的。
    需要的可以官网下载或者留下邮箱我发给你。

     

    第三种 使用Bootstrap Table表格分页

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页、排序、过滤以及行编辑。
    比如最常用的3款:

    1. datatables:http://www.datatables.club/
    2. Bootstra Table:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/
    3. EasyU DataGrid: http://www.jeasyui.net/plugins/183.html

    使用步骤:

    1.Html中声明table

    <table id="table"></table>

    2.Jquery中初始化bootstrap table:

    源码如下:

    <script>
        var $table = $('#table');
            // bootstrap table初始化
            // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
            $table.bootstrapTable({
                url: '/listUser',
                height: getHeight(),
                striped: true, //设置为 true 会有隔行变色效果
                undefinedText: "数据为空",//当数据为 undefined 时显示的字符
                search: true,
                searchOnEnterKey: true,
                showRefresh: true,
                showToggle: true,//是否显示切换试图(table/card)按钮
                showColumns: true,//是否显示 内容列下拉框
                // showPaginationSwitch:true,//是否显示 数据条数选择框
                minimumCountColumns: 2,
                showPaginationSwitch: true,
                clickToSelect: true,
                detailView: true,
                detailFormatter: 'detailFormatter',
                pagination: true,//分页
                pageSize: 8, //如果设置了分页,页面数据条数
                pageList: [5, 10, 20, 40], //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
                paginationLoop: false,//设置为 true 启用分页条无限循环的功能
                // singleSelect: false,//设置True 将禁止多选
                data_local: "zh-US",//表格汉
                search: true, //显示搜索框
                classes: 'table table-hover table-no-bordered',
                //sidePagination: 'server',
                //silentSort: false,
                smartDisplay: false,
                idField: 'id', //指定主键列
                sortName: 'id',
                sortOrder: 'desc',
                escape: true,
                searchOnEnterKey: true,
                idField: 'systemId',
                maintainSelected: true,
                toolbar: '#toolbar',
                columns: [
                    {field: 'state', checkbox: true},
                    {field: 'realname', title: '真实姓名', sortable: true, halign: 'center'},
                    {field: 'username', title: '账号', sortable: true, halign: 'center'},
                    {field: 'password', title: '密码', sortable: true, halign: 'center'},
                    {field: 'address', title: '地址', sortable: true, halign: 'center'},
                    {field: 'createtime', title: '创建时间', sortable: true, halign: 'center'},
                    {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
                ]
            }).on('all.bs.table', function (e, name, args) {
                $('[data-toggle="tooltip"]').tooltip();
                $('[data-toggle="popover"]').popover();
            });
        });

    3.后台:查询数据,返回json字符串

    必须返回json字符串或json对象

    @ResponseBody
    @RequestMapping(value = "listUser", method = RequestMethod.GET)
    public String listUser(HttpServletRequest request, HttpServletResponse response) {
        List<User> userList = userService.getAll();
        System.out.println("分页数据:" + userList);
        return JSON.toJSONString(userList);
    }

    效果图如下

    自带pagination分页:

    模糊查询:

    都是需要引入js、css等的,但是这些都是可以在官网上下载的,我就不贴出来了。主要是代码,你可以在复制过去直接使用,免得以后做项目还得重新写分页,麻烦。

    **多种不同的分页方式就写完了,实际上,thymeleaf适用的,jsp、 html页面都可以适用。照着文章复制去用即可。**

     

    原文链接:https://blog.csdn.net/ITBigGod/article/details/85224897

    展开全文
  • 使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧。最终找到与之对应的js(bootstrap-table.js中搜索了data-toggle),将class类更换成自己定义的一个class,完成...
  • 这是接着我上一个ajax获取表单提交内容博文,在原来的页面增加分页功能!分页的样式是用bootstrap。废话不多说直接上代码 图片 代码 <script src="js/bootstrap.min.js"></script> <body> <?...
  • 新项目,准备引用bootstrap-table这个控件来展示页面上的表格,无奈这款控件的分页工具栏没有跳转到xx页的功能,为了适应公司美工(只会出图的美工,却跟我要求这要求那)的蛋疼需求,硬着头皮改了一下bootstrap-...
  • Bootstrap 分页导航

    2019-02-07 16:48:46
    Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ☑ 带翻页的分页导航 带页码的分页导航 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候, 会给用户提供分页的导航...
  • 我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺的,还有一部分是拓展部分,这一部分是相当于增加一些功能来增强和改善用户体验的,...
  • 使用 Bootstrap-table表格进行分页,表格汇总统计,方便我们做报表
  • 这是不使用注解的情况下完成的分页功能,换言之就是没有使用任何框架。 首先,创建一个分页的工具类: package zz.winterWork.domain; import java.util.List; /** * @author Administrator 分页 * @param <T...
  • Bootstrap Table后端分页时,记住已选项
  • 如果你对这个项目感兴趣,可以从头看起: 开发基于SpringBoot和BootStrap的全栈论坛...开发基于SpringBoot和BootStrap的全栈论坛网站(三):登陆注册以及cookies的功能完成 开发基于SpringBoot和BootStrap的全栈...
  • 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作体验; 在创作中心设置你喜爱的代码高亮...
  •  客户端分页 将分页方式定为client 一次性从后台请求所有数据 由前台进行分页以及搜索功能,而不必再次请求服务器端  优点:方便 简单  缺点:当数据过多时会对性能造成影响  后面一篇会介绍...
  • spring mvc +bootstrap+datatable实现分页

    千次阅读 2015-12-09 22:50:57
    文章介绍大致分以下几步: 1. 后台数据分页查询实现; 2. 前台bootstrap样式+datatable插件 数据渲染;
  • 大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就...一、淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致...
  • bootstrap-table(我是用的版本1.15.4)因其功能强大而流行,但是由于封装深度,导致自定义比较困难,这不,我在研究过程中想要增加一列序号列就遇到了困难,遇到了问题子然后就需要解决,在baidu上搜索了很久,发现...
  • 新项目,准备引用bootstrap-table这个控件来展示页面上的表格,无奈这款控件的分页工具栏没有跳转到xx页的功能,为了适应公司美工(只会出图的美工,却跟我要求这要求那)的蛋疼需求,硬着头皮改了一下bootstrap-...
  • 1 分页功能开发 首先集成分页功能需要先在 Maven 中添加 pagehelper 依赖,然后在 ChapterService 中添加 pagehelper 的设置,接着试一下分页功能是否生效。后面添加分页功能的具体细节,第一修改成后端接收分页要求...
  • Bootstrap

    2021-05-30 14:15:42
    Bootstrap一、validate插件1.1 validate概述1.2 validate使用步骤1.3 校验规则1.4 validate练习二、Bootstrap2.1 Bootstrap概述2.2 响应式页面案例2.3 Bootstrap的组成2.4 栅格系统2.4.1 什么是栅格系统2.4.2 媒体...
  • HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.c...
  • 先看分页效果如下: 一、实现分页,需要先做一些准备工作,下载如下前端页面引用文件,一般官网或者github上都有。 1. bootstrap.min.css; 2. bootstrap.min.js; 3.handlebars-v4.1.1.js 4. bootstrap-...
  • 菜鸟学习bootstrap常用功能

    万次阅读 2014-10-24 17:01:08
    bootstrap中文官网:http://v3.bootcss.com/components/
  • OK,这一节我们主要来处理头部的 3 个地方:收录电影、电影动态信息、搜索电影信息。如截图: ...收录电影(需要做分页查询) 我们在请求类:ConsumerMovieController 加上对应的接口: /...
  • bootstrap常用功能

    2018-07-26 00:19:00
    意思是充满补丁的服务器,因为它是自由软件,所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。 Apache的特点是简单、速度快、性能稳定,并可做代理服务器来使用 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,896
精华内容 1,958
关键字:

bootstrap增加分页功能