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

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

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

/scripts/basic.js获得，示例页面为/feedback 页面。以下是后台文章列表页面的截图。

分页和表格功能实例截图

分页功能详解

分页功能用于当目标数据过多时，为提高页面展示速度采用的一种手段。本文中的分页功能借用了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.public function articlesAction() {

2.$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();//获得符合条件的数据

总数

34.if (empty($articles) && ! empty($countArticles)) {

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.}

43.$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;

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

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

50.$mpArticle= new Mapper_Article();

51.$this->view->elementArticleStatusId =

$mpArticle->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