zoukankan      html  css  js  c++  java
  • MongoDB +JSON+JQuery.Pagination+Linq 实现无刷新分页

    MongoDB 下载:http://www.mongodb.org/

    本实例中MongoDB的C#驱动,支持linq:https://github.com/samus/mongodb-csharp

    MongoDB的基本配置可以参考:http://www.cnblogs.com/lipan/archive/2011/03/08/1966463.html

    本实例中使用的MongoDB 版本是:mongodb-win32-i386-2.0.2-rc1.zip

    samus 驱动版本:samus-mongodb-csharp-0.90.0.1-93-g6397a0f.zip

    web前端:

    http://s.click.taobao.com/t_11?e=%2BtSC5ziSlQIKWwZv%2FOdFHL%2BK04IsHFTIXCbVQxdwNJs1TNXDFNfC0g%3D%3D&p=mm_32233099_3201984_10539553

    View Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JsonList.aspx.cs" Inherits="MongoDB_JsonList" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>
    <link href="../css/pagination.css" rel="stylesheet" type="text/css" />
    <body>
    <form id="form1" runat="server">
    <div>
    <table id="tblData" width="80%" cellpadding="1" cellspacing="1" bgcolor="gray" style="text-align: center">
    <tr>
    <td>
    NewsID
    </td>
    <td>
    Title
    </td>
    <td>
    SmallClassName
    </td>
    <td>
    Author
    </td>
    <td>
    UpdateTime
    </td>
    </tr>
    </table>
    <div id="Pagination">
    </div>
    </div>
    </form>
    </body>
    </html>

    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="../js/jquery.pagination.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
    var pageIndex =0; //页索引
    var pageSize =20; //每页显示的条数
    $(function() {
    Init(
    0);
    $(
    "#Pagination").pagination(<%=pageCount %>, {
    callback: PageCallback,
    prev_text:
    '上一页',
    next_text:
    '下一页',
    items_per_page: pageSize,
    num_display_entries:
    5,
    current_page: pageIndex,
    num_edge_entries:
    1
    });
    function PageCallback(index, jq) {
    Init(index);
    }
    });

    function Init(pageIndex) {
    $.ajax({
    type:
    "POST",
    dataType:
    "text",
    url:
    'JsonList.aspx',
    data:
    "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
    success:
    function(data) {
    if(data!=""){
    $(
    "#tblData tr:gt(0)").remove();//移除所有的数据行
    data=$.parseJSON(data);
    $.each(data,
    function(index,news){
    $(
    "#tblData").append("<tr bgcolor='white'><td>"+news.NewsID+"</td><td algin='left'>"+news.Title+"</td><td>"+news.SmallClassName+"</td><td>"+news.Author+"</td><td>"+news.Updatetime+"</td></tr>"); //将返回的数据追加到表格
    });
    }
    }
    });

    }
    </script>

    cs 页面:

    View Code
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using MongoDB;
    public partial class MongoDB_JsonList : System.Web.UI.Page
    {
    public int pageCount = 0;
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    pageCount = GetTotalPage();
    if (Request["pageIndex"] != null && Request["pageSize"] != null)
    {
    int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]);
    int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]);
    Response.Write(GetOnePage(pageSize, pageIndex));
    Response.End();
    }
    }
    }
    public int GetTotalPage()
    {
    using (MongoDBHelper db = new MongoDBHelper())
    {
    var collection = db.GetCollection<News>();
    var query = from v in collection.Linq()
    select v;
    return query.Count(); ;
    }
    }
    public string GetOnePage(int pageSize, int pageIndex)
    {
    using (MongoDBHelper db = new MongoDBHelper())
    {
    var collection = db.GetCollection<News>();
    var query = from v in collection.Linq()
    select v;
    return query.ToList<News>().Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToJson();
    }
    }
    }



    本实例使用的MongoDB数据库文件 https://files.cnblogs.com/xffy1028/NewsDB.rar,解压到配置以后的MongoDB  data文件夹

  • 相关阅读:
    Oracle sql优化
    Oracle解决锁表语句与批量生成解锁语句
    使用Spring Task轻松完成定时任务
    oralce数据表空间满了
    关于出现 org.apache.commons.lang.exception.NestableRuntimeException的解决方法
    linux根分区满了如何处理,查找大文件方法
    bt协议详解 基础篇(上)
    如何做一个开心的程序员
    程序猿是如何解决SQLServer占CPU100%的
    SqlServer索引的原理与应用
  • 原文地址:https://www.cnblogs.com/xffy1028/p/2276940.html
Copyright © 2011-2022 走看看