表格分页jquery

发布时间:2016-11-27 来源: 表格 点击:

篇一:自己动手写jQuery分页插件

如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长。

本人QQ:364175837

前言

相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您。 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用。好了废话不多说,直接上代码。 vs2010+sql2005express

正文

首先我们创建一般处理程序,来读取数据库中内容,得到返回值.

创建文件,GetData.ashx.

我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据

代码如下: 复制代码代码如下:

<%@ WebHandler Language="C#" Class="GetData" %>

using System;

using System.Web;

using System.Data.SqlClient;

using System.Data;

using System.Collections.Generic;

using System.Web.Script.Serialization;

public class GetData : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

var pageIndex = context.Request["PageIndex"];

string connectionString = @"Data Source=KUSE\SQLEXPRESS;Initial Catalog=bookshop;Integrated Security=True";

//判断当前索引存不存在,如果不存在则获取记录的总数。

if (string.IsNullOrEmpty(pageIndex))

{

//获取查询记录总数的sql语句

string sql = "select count(-1) from books";

int count = 0;

int.TryParse(SqlHelper.ExecuteScalar(connectionString, System.Data.CommandType.Text, sql, null).ToString(), out count); context.Response.Write(count);

context.Response.End();

}

//当根据索引获取数据

else

{

int currentPageIndex = 1;

int.TryParse(pageIndex, out currentPageIndex);

SqlParameter[] parms = new SqlParameter[] {

new SqlParameter("@FEILDS",SqlDbType.NVarChar,1000),

new SqlParameter("@PAGE_INDEX",SqlDbType.Int,10),

new SqlParameter("@PAGE_SIZE",SqlDbType.Int,10),

new SqlParameter("@ORDERTYPE",SqlDbType.Int,2), new SqlParameter("@ANDWHERE",SqlDbType.VarChar,1000),

new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,100) };

parms[0].Value = "*";//获取所有的字段

parms[1].Value = pageIndex;//当前页面索引

parms[2].Value = 10;//页面大小

parms[3].Value = 0;//升序排列

parms[4].Value = "";//条件语句

parms[5].Value = "ID";//排序字段

List<Book> list = new List<Book>();

using (SqlDataReader sdr = SqlHelper.ExecuteReader(connectionString, CommandType.StoredProcedure, "PAGINATION", parms)) {

while (sdr.Read())

{

list.Add(new Book { Title = sdr[2].ToString(), Auhor = sdr[2].ToString(), PublishDate = sdr[4].ToString(), ISBN = sdr[5].ToString() }); }

}

context.Response.Write(new JavaScriptSerializer().Serialize(list).ToString());//转为Json格式

}

}

public bool IsReusable {

get {

return false;

}

}

}

public class Book

{

public string Title { get; set; }

public string Auhor { get; set; }

public string PublishDate { get; set; }

public string ISBN { get; set; }

}

显示数据页面----异步请求获取数据,基于jquery

创建页面Show.htm

复制代码代码如下:

<body>

<div >

<table id="content">/*显示数据内容*/

</table>

<div id="pager" class="yahoo2"></div>/*显示分页条*/

</div>

</body>

js代码 复制代码代码如下:

$(function () {

$.post("GetData.ashx", null, function (data) {

var total = data;

PageClick(1, total, 3);

});

PageClick = function (pageIndex, total, spanInterval) {

$.ajax({

url: "GetData.ashx",

data: { "PageIndex": pageIndex },

type: "post",

dataType: "json",

success: function (data) {

//索引从1开始

//将当前页索引转为int类型

var intPageIndex = parseInt(pageIndex);

//获取显示数据的表格

var table = $("#content");

//清楚表格中内容

$("#content tr").remove();

//向表格中添加内容

for (var i = 0; i < data.length; i++) {

table.append(

$("<tr><td>" +

data[i].Title

+ "</td><td>" +

data[i].Auhor

+ "</td><td>" +

data[i].PublishDate

+ "</td><td>" +

data[i].ISBN

+ "</td></tr>")

);

} //for

//创建分页

//将总记录数结果 得到 总页码数

var pageS = total

if (pageS % 10 == 0) pageS = pageS / 10;

else pageS = parseInt(total / 10) + 1;

var $pager = $("#pager");

//清楚分页div中的内容

$("#pager span").remove();

$("#pager a").remove();

//添加第一页

if (intPageIndex == 1)

$pager.append("<span class='disabled'>第一页</span>");

else {

var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () {

PageClick($(this).attr('first'), total, spanInterval);

return false;

});

$pager.append(first);

}

//添加上一页

if (intPageIndex == 1)

$pager.append("<span class='disabled'>上一页</span>");

else {

var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'>上一页</a>").click(function () {

PageClick($(this).attr('pre'), total, spanInterval);

return false;

});

$pager.append(pre);

}

//设置分页的格式 这里可以根据需求完成自己想要的结果

var interval = parseInt(spanInterval); //设置间隔

var start = Math.max(1, intPageIndex - interval); //设置起始页

var end = Math.min(intPageIndex + interval, pageS)//设置末页

if (intPageIndex < interval + 1) {

end = (2 * interval + 1) > pageS ? pageS : (2 * interval + 1);

}

if ((intPageIndex + interval) > pageS) {

start = (pageS - 2 * interval) < 1 ? 1 : (pageS - 2 * interval);

}

//生成页码

for (var j = start; j < end + 1; j++) {

if (j == intPageIndex) {

var spanSelectd = $("<span class='current'>" + j + "</span>");

$pager.append(spanSelectd);

} //if

else {

var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {

PageClick($(this).text(), total, spanInterval);

return false; });

$pager.append(a);

} //else

} //for

//上一页

if (intPageIndex == total) {

$pager.append("<span class='disabled'>下一页</span>");

}

else {

var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>下一页</a>").click(function () {

PageClick($(this).attr("next"), total, spanInterval); return false;

});

$pager.append(next);

}

//最后一页

if (intPageIndex == pageS) {

$pager.append("<span class='disabled'>最后一页</span>");

}

else {

var last = $("<a href='javascript:void(0)' last='" + pageS + "'>最后一页</a>").click(function () {

PageClick($(this).attr("last"), total, spanInterval);

return false;

});

$pager.append(last);

}

} //sucess

}); //ajax

}; //function

}); //ready

分页样式----如果有感兴趣的,我这里还有20几套分页样式,可以留下QQ

复制代码代码如下:

<style type="text/css">

DIV.yahoo2 {

PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; FONT-FAMILY: Tahoma,Helvetica,sans-serif; TEXT-ALIGN: center

}

DIV.yahoo2 A {

BORDER-RIGHT: #ccdbe4 1px solid; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ccdbe4 1px solid; PADDING-LEFT: 8px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccdbe4 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px;

篇二:使用PHP和jQuery制作分页和表格

使用PHP和jQuery制作分页和表格

如果您已经下载了本站提供的baseProject项目源码,后台中列表页面均可作为示例,其中文章列表页面的功能最为丰富。如果您没有下载该源码,相关的js文件可以从获得,示例页面为页面。以下是后台文章列表页面的截图。

分页和表格功能实例截图 分页功能详解

分页功能用于当目标数据过多时,为提高页面展示速度采用的一种手段。本文中的分页功能借用了Zend Framework中的Zend_Paginator对象,分页适配器为

Zend_Paginator_Adapter_Null。该适配器也是最简单易用的一个。 工作原理

在PHP端,分页功能的基本参数为记录总数($countRows)、每页显示的记录数

($rowsPerPage)、当前页码($page 默认值为1),页码数量($items 指每次在页面上显示多少个页码,建议为单数)。其他参数可以通过计算得到:

1. 页码合计($countPages)取不小于$countRows/$rowsPerPage的整数;

2. 起始页码和结束页码的计算方式太长不写了;

3. 页码列表:从起始页码到结束页码的页码组成的数组,如array(4, 5, 6, 7, 8)

在HTML端,必要的参数为PHP端计算得出的数据,同时需要指定一个用于显示分页信息的html元素。然后使用jQuery根据参数动态生成html并将其插入到指定的html元素中

就行了。

PHP示例代码详解 1.

2. public function articlesAction() { $pageNumber= $this->getRequest()->getParam('page', 1);//获取当前页码,如果未指定则设为1

3.$sortBy= $this->getRequest()->getParam('sortby');//获取sortby设置

4.if (empty($sortBy) || ! preg_match('/^[a-z0-9_-]+ (asc|desc)$/i', $sortBy)) {

5. //如果sortBy为空或者不符合格式要求则使用以下的排序方式

6. //注意:一定要进行格式检查,防止sql注入

7. $sortBy= Project_Table::getFullyColumnName('article', 'id') . ' desc';

8.}

9.$mArticle= new Model_Article();

10./* 这部分是处理where子句的,和本文关系不大,略过 */

11.$whereArray = array(

12. '`article`.`article_category_id`'

=>$this->getRequest()->getParam(Project_Table::getFullyColumnName('article',

'article_category_id')),

13. '`article`.`article_status_id`'

=>$this->getRequest()->getParam(Project_Table::getFullyColumnName('article',

'article_status_id')),

14.);

15.$whereString = '';

16.foreach ($whereArray as $key => $value) {

17. if (! empty($value)) {

18. if ($key == '`article`.`article_category_id`' &&$value == '-1') {

19.$whereString .= " AND {$key} IS NULL";

20. } else {

21.$whereString .= " AND {$key} = '{$value}'";

22. }

23. }

24.}

25.if (! empty($whereString)) {

26. $whereString= substr($whereString, strlen(' AND '));

27.} else {

28. $whereString = null;

29.}

30./* 以上是处理where子句的 */

31.$maxGetRows= Project_Config::PAGINATOR_ITEM_COUNT_PER_PAGE;//设置每页显示的记录数量

32.$articles = $mArticle->getArticles($whereString, $sortBy, $maxGetRows, ($pageNumber - 1) * $maxGetRows);//从数据库中读取数据

33.$countArticles= Project_Table::getLastFoundRows();//获得符合条件的数据总数

35. //如果没有取到任何记录,而且记录总数不为空,说明当前页码超出范围了,所以处理一下

36. $articles = $mArticle->getArticles($whereString, $sortBy, $maxGetRows, null);

37. $pageNumber = 1;

38.}

39.$pDate= Project_Datetime::getInstance();//时间处理工具,和本文无关

40.foreach ($articles as $key => $article) {

41. $articles[$key][Project_Table::getFullyColumnName('article', 'modified')] = $pDate->getUserTimeFromTime($article[Project_Table::getFullyColumnName('article', 'modified')], true);//把时间戳转换为用户的当地时间,和本文无关

42.}

$paginator= Zend_Paginator::factory($countArticles, 'Null');//调用Zend提供

的分页适配器,参数1是总记录数,参数2是适配器的名字

44.$paginator->setCurrentPageNumber($pageNumber);//告诉分页器当前页码

45.$pages = $paginator->getPages();//得到了前面提到的所有参数,后面我会打印它,这样你会直观的看到其内容

46.$this->view->articles = $articles;

47.$this->view->pages = $pages; 43.

48.//以下处理是为了页面中的下拉选单提供选项数据,和本文关系不大

49.if(! $this->getRequest()->isPost()) {

50. $mpArticle= new Mapper_Article();

51. $this->view->elementArticleStatusId =

$mpArticle-

表格分页jquery

>getElement('article_status_id', array(Project_Mapper::OPTIONS_NULLABLE =>true, Project_Mapper::OPTIONS_DEFAULT =>''));

52. $_categories = $mArticle->getAllowAppendArticleArticleCategories(null, null, null, null, true);

53. $categories = array(

54. $this->view->translate(Model_Article::NO_CATEGORY) =>'-1',

55. );

56. foreach ($_categories as $key => $row) {

57.

$categories[$row[Project_Table::getFullyColumnName('article_category', 'name')]] = $row[Project_Table::getFullyColumnName('article_category', 'id')];

58. }

59. $mpArticle= new Mapper_Article();

60. $this->view->elementArticleCategories =

$mpArticle->getElement('article_category_id', array(Project_Mapper::OPTIONS_IN_ARRAY =>$categories, Project_Mapper::OPTIONS_NULLABLE =>true));

61.}

62. }

$pages中的内容我打印了一下,这样更直观。如下。

63. stdClass Object

65.

66.

67.

68.

69.

70.

71.

72.

73.

74.

75.

76.

77.

78.

79.

80.

81.

82.

83.

84.

85. [pageCount] => 3 [itemCountPerPage] => 10 [first] => 1 [current] => 2 [last] => 3 [previous] => 1 [next] => 3 [pagesInRange] => Array( [1] => 1 [2] => 2 [3] => 3)[firstPageInRange] => 1 [lastPageInRange] => 3 [currentItemCount] => 10 [totalItemCount] => 21 [firstItemNumber] => 11 [lastItemNumber] => 20 )

Zend Framework的开发人员确实很认真,返回的参数非常充分,不需要任何的补充。

顺便提一下以上代码中未体现的细节,当使用post方式访问该页面时会得到json数据而不是html。这个细节写在init()方法中,代码如下:

1. public function init() {

2.if ($this->getRequest()->isPost()) {

3. $this->_helper

4. ->contextSwitch()

5.

6.

7.

8.

9.

10.

11.

}} ->addActionContext('articles', 'json') //就是这里咯 ->addActionContext('trashcategory', 'json') ->addActionContext('trasharticle', 'json') ->addActionContext('movecategory', 'json') ->initContext('json');

HTML示例代码详解

这次只贴出关键的内容哦。

1. <form method="POST" action="<?phpecho $this->url()?>" onsubmit="

2. try{

return pBase.submitForm(this, true, null, loadArticlesGrid);//使用ajax提交表

单,回调函数为loadArticlesGrid

4. } catch(e) {

5.alert(e.message);

6.return false;

7. };">

8.<div class="beforeGridclearFloat">

9. <div class="floatLeft"> 3.

10. <!--Pagination是我写的helper,关于这个东西后面解释-->

11. <?phpecho $this->pagination($this->pages->current, 'articles')?>

12. </div>

13. <!--截图中右侧的文档选择器-->

14. <div class="floatRight">

15. <?phpecho $this->search_select($this->elementArticleStatusId, array('onchange' =>"pBase.paginator('div.pagination[name=articles]', 'goto', 1);"));?>

16. <?phpecho $this->search_select($this->elementArticleCategories, array('onchange' =>"pBase.paginator('div.pagination[name=articles]', 'goto', 1);"));?>

17. <?phpecho $this->iconButton('add',

$this->actionTitle('createarticle'), "window.open('{$this->url(array('action'

=>'editarticle'))}')", ! Project_Session::getInstance()->isAllow('editarticle'))?>

18. </div>

19.</div>

20.

21.

22.

23.

24.

25.

false)?>

26.

27.

28.

29.

30.

31. <!--这是表格部分,先不说它--> <table id="articleGridTable" class="gridTable">…</table> <!--底部的分页栏--> <div class="afterGridclearFloat"> <div class="floatLeft"><?phpecho $this->pagination($this->pages->current, 'articles',</div> </div> </form> <script type="text/javascript"> $(document).ready(function(){ //这句话就是调用js绘制分页的,第一个参数是目标容器,第二个参数是相关参数组成的json对象(就是json_encode($pages)啦)

32.pBase.paginator('div.pagination[name=articles]', {$jsonPages});

33. });

34. function loadArticlesGrid(response) {

35.//ajax回调,此时重绘分页

36.pBase.paginator('div.pagination[name=articles]', response.pages);

37. }

38. </script>

里面用到了一个helper,因为这样可以避免反复去写类似的html内容。带有两个参数,

篇三:用jQuery和jTemplates插件实现客户端分页的表格展现

一直以来觉得用JSON和JavaScript在客户端绑定数据给一个表格或者Grid是件很麻烦的事情。Microsoft ASP.NET Ajax提供了类似Sys.Date.DataTable和

Sys.Dat.DataView这样的类来帮助实现客户端绑定,也可以用for循环来动态构建表格,但这些都显得很麻烦而且很不灵活。jQuery的jTemplates插件实现了一种灵活的方式来控制显示,它允许我们定义好一个显示模板,jQuery在展现数据时根据选择的模板来动态生成。这就类似于ASP.NET中的ItemTemplate,也和XSLT有些类似。通过这样的方式,你可以很容易的在客户端通过自定义模板以很灵活的方式展现列表数据。

jQuery官方网站给jTemplates的定义是:jTemplates is a template engine 100% in JavaScript.更多的信息可以参考http://jtemplates.tpython.com/。 接下来我们实现一个小例子来演示如何使用jTemplate去构建一个RSS阅读器。

创建RSS阅读器

RSS源通常都位于另外的domain中,而在AJAX中浏览器通常禁止cross-domain的访问,在这里,为了避开这个问题我们可以在服务端去取得数据。通常我们可以将这些方法做成WebMethod方法放到WebServices中,但这里我们可以将这些方法放到页面的cs文件中。需要注意的是,这个方法必须被声明为Static方法,而且要以WebMethod标注。这样做的目的是,只有在标注为WebMethod,客户端才能正常访问这个方法。而Static标记标识了这个方法不与任何这个页面的实例相关,而是而这个页面本身相关,对于任何一个实例而言都是相同的。所以在你调用的时候,你不需要与任何页面类的实例相关。

在上边的方法中设定了RSS的地址,并通过LINQ to XML来取得我们想要的属性。Skip和Take函数联合起来实现了一个分页的功能。

通过jQuery调用Page Method

jQuery.Ajax方法实现了用Ajax的方式来请求一个页面并设定回调函数来处理相应状态和结果。在我们的实例中,需要请求上边写的PageMethod并处理返回结果。

在success的回调函数中我们什么也没有做,先来看看result到底是个什么东西。在浏览器中设置允许调试脚本,定义一个函数供回调函数中调用,然后设定断点在新的函数中。

我们看到在服务端

将数据以IEnumerable返回后实际上在result中包含的是一个JSON表示的数据集合。每个对象含有Date, Description, Link和Title属性,这和前边用LINQ取XML字段时是相符的。因为你已经拥有了这个数据集合,接下来所要做的就是在客户端通过某种方式展现出来。你也许会想到用动态拼接Table的方式来做,但这并不灵活。jTemplates提供了更优雅的方式来实现。

用jTemplate来展现数据

jTemplate就把数据展现的方式和业务逻辑分开来,允许你定义好一个模板,然后再运行时会根据模板的内容来render. 和ASP.NET中的绑定相似,也有一个特定的符号来表示绑定的上下文对象$T。$T就类似于上图中的result.d[n]—某一个业务对象,需要展现哪个属性后边直接跟.PropertyName即可。因为表格的行是可变的,所以这里就类似于XSLT中一样来控制动态生成.

相关热词搜索:分页 表格 jquery jquery ajax参数 jquery动态生成表格 jquery选择器

热点文章阅读

版权所有 小龙文挡网 www.xltkwj.com