MVC+EF+Jquery.jqPaginator实现刷新分页

1，mvc+EF是目前asp.net使用比较多的一个框架，现在就来说一下，如何使用jquery.jqPaginator实现前台分页

起先我定义了一个model如下，部分代码，model是建立在mvc中Model文件下的，之后具体的就不多说了想要多了解如何创建Mvc+EFMVC+EF简单实例

//数据映射 myQuerConnection 和webconfig中的数据库连接的名称一致
public partial class myQuerConnection : DbContext
    {
        public DbSet<ProductsDB> ProductsDB { get; set; }
        public DbSet<GongGaoDB> GongGaoDB { get; set; }
        public DbSet<huodong> HuoDong { get; set; }
    }
//实体 huodong和数据库中huodongs表名就差一个s，不然会报错找不到表
//并且每个属性要和数据库中的列名保持一致
public class huodong
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string BaoMingDiDian { get; set; }
        public string U_Context { get; set; }
        public string HuoTime { get; set; }
        public DateTime Opre_Time { get; set; }
    }

建立control，以下是主要的代码

public class HDsController : Controller
    {
        //efmodel对象
        private myQuerConnection db = new myQuerConnection();

        /// <summary>
        /// 分页查询表
        /// </summary>
        /// <param name="page"></param>
        /// <param name="rows"></param>
        /// <returns></returns>
        public List<huodong> GetList(int page, int rows)
        {

            List<huodong> ulist = db.HuoDong.OrderBy(a => a.Id).Skip((page - 1) * rows).Take(rows).ToList();

            return ulist;

        }

        /// <summary>
        /// 查询总条数
        /// </summary>
        /// <returns></returns>
        public int GetAllCount()
        {

            return db.HuoDong.Count();
        }

        // GET: HDs
        public ActionResult Index(int? page,int? rows)
        {
            //ViewData.Model = new EFT<huodong>().GetPagedList<int>(EFADO.pageIndex(), EFADO.pageSize, m => m.Id > 0, m => m.Id, false);
            //ViewBag.Total = new EFT<huodong>().GetListBy(m => m.Id > 0).Count;
            //return View();
            //return View(db.HuoDong.ToList());
            if (page == null)
            {
                page = 1;
                rows = 5;
            }

            List<huodong> ulist = GetList((int)page, (int)rows);

            ViewBag.ulist = ulist;

            ViewBag.cpage = page;

            int allCount = GetAllCount();

            int allPage = (int)(allCount / rows);

            if (allCount%rows!=0)
            {
                allPage = allPage + 1;
            }

            ViewBag.allpage = allPage;
            return View();
        }

接下来就是如何实现分页了jquery.jqPaginatorjqPaginator.js下载使用说明链接

view部分的代码实现

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.BaoMingDiDian)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.U_Context)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.HuoTime)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Opre_Time)
        </th>
        <th></th>
    </tr>
    @{
        List<MyQuer.Models.huodong> ulist = ViewBag.ulist as List<MyQuer.Models.huodong>;
        foreach (MyQuer.Models.huodong item in ulist)
        {
            <tr>
                <td>
                    @item.BaoMingDiDian
                </td>
                <td>
                    @item.Name
                </td>
                <td>
                    @item.U_Context
                </td>
                <td>
                    @item.HuoTime
                </td>
                <td>
                    @item.Opre_Time
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    }

</table>

<ul class="pagination" id="paginationl">
</ul>
@Scripts.Render("~/bundles/jquery")//MVC中压缩调用js
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/My")//调用jqPaginator.js
<script type="text/javascript">
    var page = parseInt('@ViewBag.cpage');
    var allpage = parseInt('@ViewBag.allpage');
        $.jqPaginator("#paginationl", {
            totalPages: allpage,
            visiblePages: 6,
            currentPage: page,
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            last: '<li class="last"><a href="javascript:;">尾页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',

            onPageChange: function (num, type) {
                //type 表示是不是第一次加载
                if (type == "init") {

                }
                else {
                    location.href = "/HDs/index?page=" + num + "&rows=5";
                }
            }
        });
    
</script>

mvc压缩调用js说明

调用代码主要是写在mvc中App_Start/BundleConfig.cs中，代码如下

 bundles.Add(new ScriptBundle("~/bundles/My").Include(
                        "~/Scripts/jq-paginator.js"/*, "~/Scripts/MyScript.js"*/));

不过你得先将jq-paginator.js放入到mvc Scripts文件夹中，这样就实现了压缩调用js

最后运行view，查看效果

MVC+EF+Jquery.jqPaginator实现刷新分页

猜你喜欢