JS和boostrap在MVC下实现分页

来源：互联网发布：知乎全友家居编辑：程序博客网时间：2024/06/05 08:46

最近一直在忙着做项目，终于有时间把这段实现的新东西写一下了，第一次把JavaScript的东西用到事件当中，也是第一次用BootStrap来设计页面，当这两个要一起用时，还真是有点难度，不过总算弄好了。

例如在任何网站都有一个搜索框，我们查询之后就转换到下一个页面。然后再查询页面进行查询，我们在查询的时候需要一次只是显示20条内容，如果想要看更多的内容就点击下一页，就好像我们的百度一样，而我是先查询，点击下一页的时候我就把当前的内容清楚，然后附加下一页的内容。具体JS代码如下。

//具体分页方法function createPage(pageSize, buttons, total) {    $(".pagination").jBootstrapPage({        pageSize: pageSize,        total: total,        data: { "PageIndex": (pageIndex + 1) },        maxPageButton: buttons,        onPageClicked: function (obj, pageIndex) {            ////打击新的页面的时候删除原来画的表格            delTab();            //将页面值传给Controller中的<span style="font-family: Arial, Helvetica, sans-serif;">BiologyCategoryView</span><span style="font-family: Arial, Helvetica, sans-serif;">方法中</span>            $.ajax({                type: "POST",                url: "/OpenClass/BiologyCategoryView",                data: { "pageIndex": (pageIndex + 1), "pageSize": (pageSize) },                success: function (data) {                    $("#content").append(data);                }            });        }    });}//模糊查询方法，单击按钮是进行视频信息查询的方法。function search() {    var searchContent = $("#VideoinfoContext").val();    window.location = "/PageHome/SearchView?searchContent=" + searchContent;    }////打击新的页面的时候删除原来画的表格function delTab() {    var oTab = document.getElementById("content");    while (oTab.hasChildNodes()) {        oTab.removeChild(oTab.firstChild);    }}

删除原来的表格的时候我会给他事先定义一个节点，例如<div id="content"> </div>,这样我就可以判断我删除的是该节点下的信息。

然后再视图（views）中代码如下

     <div class="container" style="margin-top: 20px;">        <!--该节点下添加查询到的表格。-->        <div id="content">         </div>    </div>    <!--添加分页-->    <div style="padding-left: 100px;">        <p id="pageIndex" style="font-size: 20px; font-weight: bold; color: blue; margin-left: 150px;"></p>        <ul class="pagination"></ul>    </div>

因为再我是做的视频网站，然后就把查询到的图片的路径放在<img>控件中，当然我这里是再Control中拼接的表格，代码如下：

#region 根据标签获得公开课的信息 BiologyCategoryView() +孟海滨 2015年01月28日 17:33:03        /// <summary>        /// 根据标签获得某个公开课的信息        /// </summary>        /// <returns></returns>        public string BiologyCategoryView()        {            int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);            int pageIndex = Request["PageIndex"] == null ? 1 : int.Parse(Request.Form["pageIndex"]);            //根据工厂生成一个借口            IVideoSortService videoSortService = ServiceFactory.GetVideoSortService();            List<VideoInfo> videoList = new List<VideoInfo>();            videoList = videoSortService.GetSomeVideoInfo("生物", pageSize, pageIndex);  ///调用服务端的信息，查询生物课程的视频，显示20条            int tbCol = 0;            string strControl = null;        <span style="white-space:pre">//定义一个字符串，用来保存拼接的表格</span>            strControl += "<table class='table-responsive' id='table'  border='0' align='center' cellpadding='0' cellspacing='0'>";            strControl += "<tr>";            for (int i = 0; i < videoList.Count; i++)            {               //将查询的细心动态的添加到表格中，包括视频名称，视频的介绍，播放按钮                strControl += "<td width='285px' align='center'> <div href='#' class='thumbnail'><img src='../../images/10.jpg' />" + videoList[i].VideoName + "</div> <div class='caption'><p>" + videoList[i].VideoIntrduce + "</p><p><a href='#' class='btn btn-primary' role='button'>播放</a> </p></div></td>";                tbCol++;                    if (tbCol % 5 == 0)                    {                        strControl += "</tr>";                        strControl += "<tr>";                    }                              }            strControl += "</tr>";            strControl += "</table>";            //ViewData["biologyVideo"] = strControl;            return strControl;   //返回生成的表格            //return PartialView();        }        #endregion

这样一个分页的功能，加上动态拼接表格的方法就这么完成了

0 0