JS和boostrap在MVC下实现分页

页面导航:首页 > 网络编程 > JavaScript > JS和boostrap在MVC下实现分页

JS和boostrap在MVC下实现分页

来源: 作者: 时间:2016-02-03 09:20 【

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

最近一直在忙着做项目,终于有时间把这段实现的新东西写一下了,第一次把Script的东西用到事件当中,也是第一次用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中的BiologyCategoryView方法中
            $.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)中代码如下

 


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

     

     

    #region 根据标签获得公开课的信息 BiologyCategoryView() +孟海滨 2015年01月28日 17:33:03
            /// 
            /// 根据标签获得某个公开课的信息
            /// 
            /// 
            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 videoList = new List();
                videoList = videoSortService.GetSomeVideoInfo(生物, pageSize, pageIndex);  ///调用服务端的信息,查询生物课程的视频,显示20条
                int tbCol = 0;
                string strControl = null;
            
    		//定义一个字符串,用来保存拼接的表格
                strControl += ;
                strControl += ;
                for (int i = 0; i < videoList.Count; i++)
                {
                   //将查询的细心动态的添加到表格中,包括视频名称,视频的介绍,播放按钮
                    strControl += ;
                    tbCol++;
    
                        if (tbCol % 5 == 0)
                        {
                            strControl += ;
                            strControl += ;
    
                        }
                      
                }
    
                strControl += ;
                strControl +=
    + videoList[i].VideoName +

    + videoList[i].VideoIntrduce +

    <a class="btn data-cke-saved-href=http://blog.csdn.net/lovemenghaibin/article/details/ href=http://blog.csdn.net/lovemenghaibin/article/details/ role=" button'="">播放

    ; //ViewData[biologyVideo] = strControl; return strControl; //返回生成的表格 //return PartialView(); } #endregion

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

     

    Tags:

    相关文章

      文章评论

      最 近 更 新
      热 点 排 行
      Js与CSS工具
      代码转换工具
      
      <