JS和boostrap在MVC下实现分页

       最近一直在忙着做项目，终于有时间把这段实现的新东西写一下了，第一次把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);
    }
}

       然后再视图（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>

#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