MVC——JS插件Bsgrid分页条进行重构

最新推荐文章于 2024-05-07 15:56:26 发布

知书丶

最新推荐文章于 2024-05-07 15:56:26 发布

阅读量361

点赞数 1

分类专栏：技术总结文章标签： js Bsgrid MVC

本文链接：https://blog.youkuaiyun.com/weixin_44540175/article/details/86568488

版权

技术总结专栏收录该内容

8 篇文章

订阅专栏

Bsgrid分页条重构：

首先我们先了解一下Bsgrid分页原理。

每一次跳转页（下一页，上一页），都会重新调用控制器方法，重新查询一次数据，在通过Skip与Take切割出要显示的几条数据，返回到页面重新渲染在table上。

而我们可以通过返回的数据渲染出自己想要的分页条。

想要重构分页条你先得确定你想要渲染的分页条是什么样式，现在就以我分页条的样式为例来详细的了解一下如何重构分页条。

下面是我分页条的样式：
在这里插入图片描述
1个ul标签下面有7个li，每个li里面有一个a标签，内容是写在a标签里面。

我现在要做的就是动态的改动中间的5个li标签，由图可以看出，给当前页的li一个颜色类，给超出页数的li一个禁用的类。

Bsgrid有一个配置项为additionalAfterRenderGrid（数据渲染后执行的方法）

该方法会接收一个参数为options，这个参数就是控制器查询方法的返回值。

下为输出的options
在这里插入图片描述

其中curPage为当前页，data为返回的数据，success是否成功的标志，totalRows为总条数。

我们如果想要自己渲染分页条那么需要当前页与总页数。

当前页是已知的，我们如何计算总页数呢？

总页数 = 总条数 / 分页大小

总条数是已知的，分页大小从何而来？

刚开始我用的是data的数据条数为分页大小，但是如果是最后一页的话，数据条数是小于或等于分页大小。于是我在查询的时候加了一个字段为表格的ID，利用Bsgrid一个默认特性，即使没有数据也会显示空白行，也就是说用如果要用我这个分页条就一定要显示空白行。
在这里插入图片描述
获取到自己查询时添加的表格ID，通过ID获取到有多少行，在减去1（表头）就是分页大小。

有了分页大小，我们就可以计算出总页数。

在这里插入图片描述

先计算出是否有余数。如果有的话就两者相除在加1 ，没有就不用了。

在进行转化为int型，这个parseInt转化只会保留常数部分，小数部分无论多大都会直接移除。

现在假设当前页在中间，利用循环得到我们要显示在分页条的5个页数。

在这里插入图片描述

我们的最小页数要大于0，在进行循环5个数都加1，直到第一个数不小于1。
在这里插入图片描述

进行了加法之后我们还要进行减法，满足两个条件，第一个不小于1最后一个不大于总页数
在这里插入图片描述
最后我们得到一组想要的数据。现在我们通过这组数据进行渲染分页条。

我们在查询的时候还要加一个字段为分页条的ID，确定哪个分页条属于这个表格，在给分页条中间的5个li标签给予一个自定义属性方便获取这5个li。

下面我们通过ID与自定义属性获取到所需要的5个li标签，并且把他们的类都移除。
在这里插入图片描述
接下来用5个分页数据和5个li对号入住，并且给与选中颜色类或禁用类。

循环，给li标签中的a标签赋值，判断是否大于总页数，大于则给与禁用类，在判断是否等于当前页，等于则给与选中状态颜色类。

分页条样式渲染完成，接下来给分页条上下页与指定页功能。
在这里插入图片描述

第一个li与最后一个li给与上一页与下一页。

中间的做一个优化判断，（因为如果点击某一页这个页数大于总页数就会弹出一个提示框）

判断当前点击的页数是否小于等于总页数，如果判断成功就跳转指定页，如果判断失败就返回一个false，不执行跳转代码。（getTotalPages为插件方法获取总页数，gotoPage是跳转某页）
控制器代码：

        public ActionResult SelectUser_Table(BsgridPage bsgridpage) //查询用户信息
        {       
            var list = (from dbUser in myModels.User_Table
                        where dbUser.ID_User != 22
                        select new UserVo
                        {
                            ID_User = dbUser.ID_User,
                            Jrisdiction = dbUser.Jrisdiction,
                            UserType = dbUser.UserType, 
                            State_User = dbUser.State_User,
                            MC_User = dbUser.MC_User,
                            Number_Job = dbUser.Number_Job,
                            ID = "UserVo",
                            TableID = "UserTable",
                        }).ToList();	
            int count = list.Count;
            List<UserVo> User = list.Skip(bsgridpage.GetStartIndex()).Take(bsgridpage.pageSize).ToList();
            Bsgrid<UserVo> bsgrid = new Bsgrid<UserVo>()
            {
                success = true,
                curPage = bsgridpage.curPage,
                data = User,
                totalRows = count,
            };
            return Json(bsgrid, JsonRequestBehavior.AllowGet);
        }

页面代码
html部分：

<table id="UserTable" class="table table-hover" style="margin-top:30px;">
                <tr>
                    <th w_check="true" w_index="ID_User" width="5%">#</th>
                    <th w_index="Number_Job" width="15%">工号</th>
                    <th w_index="MC_User" width="12%">名称</th>
                    <th w_index="UserType" width="12%">部门</th>
                    <th w_index="JD" width="32%">权限</th>
                    <th width="12%">状态</th>
                    <th w_render="Creatbutton" width="12%">操作</th>
                </tr>
            </table> 
            <div style="text-align:right;" id="UserVo">
                <ul class="pagination">
                    <li><a onclick="UserTable.prevPage()">PREV</a></li>
                    <li li="li"><a onclick="parseInt($(this).html()) <= UserTable.getTotalPages() ? UserTable.gotoPage($(this).html()) : false">1</a></li>
                    <li li="li"><a onclick="parseInt($(this).html()) <= UserTable.getTotalPages() ? UserTable.gotoPage($(this).html()) : false">2</a></li>
                    <li li="li"><a onclick="parseInt($(this).html()) <= UserTable.getTotalPages() ? UserTable.gotoPage($(this).html()) : false">3</a></li>
                    <li li="li"><a onclick="parseInt($(this).html()) <= UserTable.getTotalPages() ? UserTable.gotoPage($(this).html()) : false">4</a></li>
                    <li li="li"><a onclick="parseInt($(this).html()) <= UserTable.getTotalPages() ? UserTable.gotoPage($(this).html()) : false">5</a></li>
                    <li><a onclick="UserTable.nextPage()">NEXT</a></li>
                </ul>
            </div>

js代码：

 UserTable = $.fn.bsgrid.init('UserTable', {
                url: "SelectUser_Table",
                pageSizeSelect: true,  //分页大小选择
                pageSize: 4,
                showPageToolbar: false, //分页条显示
                pageIncorrectTurnAlert: false, //无页可翻提示
                event: {
                    customRowEvents:
                        {
                            click: function (record, rowIndex, trObj, options) {
                                Check("#UserTable tr", rowIndex + 1);
                            }
                        }
                },
                additionalAfterRenderGrid: PagingItem, //数据渲染后执行的方法。
                pageSizeForGrid:[1,4,10,20,25,50,100,200], //分页数组
            });
            
function PagingItem(rowIndex, options) {
    if (options.data.length > 0) {
        var TableID = options.data[0].TableID;
        var Pagecount = $("#" + TableID + " tr").length - 1;
        var PageQuantity = parseInt(options.totalRows) % parseInt(Pagecount);
        if (PageQuantity > 0) {
            PageQuantity = (parseInt(options.totalRows) / parseInt(Pagecount)) + 1;
        } else {
            PageQuantity = (parseInt(options.totalRows) / parseInt(Pagecount));
        }
        PageQuantity = parseInt(PageQuantity); //获取页数(去余数)
        var Curpage = options.curPage; //获取页码
        var array = new Array(5);
        var k = 2;
        for (var i = 0; i < 5; i++) {
            array[i] = Curpage - k;
            k--;
        }
        for (var j = 0; array[0] < 1 ; j++) {
            for (var m = 0; m < 5; m++) {
                array[m]++;
            }
        }
        for (var f = 0; parseInt(array[0]) > 1 && parseInt(array[4]) > parseInt(PageQuantity) ; f++) {
            for (var n = 0; n < 5; n++) {
                array[n]--;
            }
        }
        var ID = options.data[0].ID;
        var li = $("#" + ID + " .pagination [li='li']");
        li.attr("class", "");
        for (var c = 0; c < 5; c++) {
            $(li[c]).children().eq(0).html(array[c]);
            if (array[c] > parseInt(PageQuantity)) {
                $(li[c]).addClass("disabled");
            } else if (array[c] == parseInt(Curpage)) {
                $(li[c]).addClass("active");
            }
        }
    }
}

插件使用中文文档：http://thebestofyouth.com/bsgrid
——宋心成