今天是学习做后台页面布局，用得是bootcss。那么效果展示一下。
布局的代码
[html]
无标题文档
瀑布流留言板管理系统
留言管理
所有留言
网站管理
基本设置
无标题文档
瀑布流留言板管理系统
留言管理
所有留言
网站管理
基本设置
从中学到javascript函数
str.substr(0,20)意思是从0个字符开始取20个字符
math.random()取随机数
switch语句
这后台是ajax的噢。写了好久的分页呢。好吧，直接上代码。
[javascript] // javascript document
$('body').off('.data-api');
$(document).ready(function(e) {
$(#menu a).click(function() {
switch ($(this).text()) {
case '所有留言':
admin_content(1);
break;
case '基本设置':
$(#main #maindata).load('admin_config.html?r='+math.random());
break;
default:
break;
}
});
$(#start).click();
});
/**
*留言管理
*/
function admin_content(page) {
$.ajax({
url: 'http://localhost/l/admin.php?m=admin&a=content&page=' + page + '&rand=' + math.random(),
type: 'get',
datatype: 'json',
data: {},
complete: function(xhr, textstatus) {
//called when complete
},
success: function(json, textstatus, xhr) {
if (json['state'] == 'ok') {
var page_start = json['start'];//分页开始
var page_end = json['end'];//分页结束
var page_page = json['page'];//分页当前页面
var data = json['data'];//分页数据
/**
* 生成 表格内容
*/
var table_html = '
操作用户名留言内容发表时间
';
for (i = 0; i var trclass = (i % 2 == 0) ? 'class=info' : '';
var tr_html = '删除 ' + data[i].username + ' ' + data[i].content + '
' + getlocaltime(data[i].time) + '
';
table_html = table_html + tr_html;
}
table_html = table_html + '
';
/**
*生成分页
*/
var page_html = '';
if (page_end !== 0) {
if (page_page == 1) {
page_html = page_html + '«';
} else {
page_html = page_html + '«';
}
}
for (var i = page_start; i if (page_page == i) {
page_html = page_html + '' + i + '';
} else {
page_html = page_html + '' + i + '';
}
}
if (page_end !== 0) {
if (page_page == page_end) {
page_html = page_html + '»';
} else {
page_html = page_html + '»';
}
}
page_html = page_html + '
';
var maindata = $(#main #maindata);
maindata.html(table_html);
maindata.append(page_html);
admin_content_page(page_page,page_end); //挂接分页点击事件
}
//alert(json.data);
},
error: function(xhr, textstatus, errorthrown) {
//called when there is an error
}
});
}
/**
* 挂机分页事件
* 参数 page_page 当前分页
* 参数 page_end 分页数量
*/
function admin_content_page(page_page,page_end) {
$(#mainpage a).click(function() {
var charstr = $(this).text();
var num = charstr;
if (charstr == ») {
num = parseint(page_page) + 1;
if (page_end return;
}
} else if (charstr == «) {
num = parseint(page_page) - 1;
if (num return;
}
}
admin_content(num);
});
}
function admin_content_del (id) {
alert(id);
}
function getlocaltime(ns) {
return new date(parseint(ns) * 1000).tolocalestring().replace(/:\d{1,2}$/, ' ');
} // javascript document
$('body').off('.data-api');
$(document).ready(function(e) {
$(#menu a).click(function() {
switch ($(this).text()) {
case '所有留言':
admin_content(1);
break;
case '基本设置':
$(#main #maindata).load('admin_config.html?r='+math.random());
break;
default:
break;
}
});
$(#start).click();
});
/**
*留言管理
*/
function admin_content(page) {
$.ajax({
url: 'http://localhost/l/admin.php?m=admin&a=content&page=' + page + '&rand=' + math.random(),
type: 'get',
datatype: 'json',
data: {},
complete: function(xhr, textstatus) {
//called when complete
},
success: function(json, textstatus, xhr) {
if (json['state'] == 'ok') {
var page_start = json['start'];//分页开始
var page_end = json['end'];//分页结束
var page_page = json['page'];//分页当前页面
var data = json['data'];//分页数据
/**
* 生成 表格内容
*/
var table_html = '
操作用户名留言内容发表时间
';
for (i = 0; i var trclass = (i % 2 == 0) ? 'class=info' : ''; var tr_html = '
删除 ' + data[i].username + ' ' + data[i].content + '
' + getlocaltime(data[i].time) + '
';
table_html = table_html + tr_html;
}
table_html = table_html + '
';/**
*生成分页
*/
var page_html = '
';
if (page_end !== 0) {
if (page_page == 1) {
page_html = page_html + '«';
} else {
page_html = page_html + '«';
}
}
for (var i = page_start; i if (page_page == i) {
page_html = page_html + '' + i + '';
} else {
page_html = page_html + '' + i + '';
} }
if (page_end !== 0) {
if (page_page == page_end) {
page_html = page_html + '
»';
} else {
page_html = page_html + '»';
} }
page_html = page_html + '
';
var maindata = $(#main #maindata);
maindata.html(table_html);
maindata.append(page_html);
admin_content_page(page_page,page_end); //挂接分页点击事件
}
//alert(json.data);
},
error: function(xhr, textstatus, errorthrown) {
//called when there is an error
}
});
}
/**
* 挂机分页事件
* 参数 page_page 当前分页
* 参数 page_end 分页数量
*/
function admin_content_page(page_page,page_end) {
$(#mainpage a).click(function() {
var charstr = $(this).text();
var num = charstr;
if (charstr == ») {
num = parseint(page_page) + 1;
if (page_end return;
}
} else if (charstr == «) {
num = parseint(page_page) - 1;
if (num return;
}
}
admin_content(num);
});
}
function admin_content_del (id) {
alert(id);
}
function getlocaltime(ns) {
return new date(parseint(ns) * 1000).tolocalestring().replace(/:\d{1,2}$/, ' ');
}这是分页请求的服务端代码
[php] public function content()
{
//引入分页类
include page.class.php;
//得到data表的数据数量
$rows = $this->db->count('select * from data');
//创建分页对象
$page = new page($rows, 5, );
$list=$this->db
->order('id desc')
->table('data')
->limit($page->getlimit())
->select();
/*
echo
;
var_dump($list);
echo
;
*/
$json['state']='ok';
$json['start']=$page->getstart();
$json['end']=$page->getend();
$json['page']=$page->getpage();
$json['data']=$list;
echo json_encode($json);
//exit();
} public function content()
{
//引入分页类
include page.class.php;
//得到data表的数据数量
$rows = $this->db->count('select * from data');
//创建分页对象
$page = new page($rows, 5, );
$list=$this->db
->order('id desc')
->table('data')
->limit($page->getlimit())
->select();
/*
echo
;
var_dump($list);
echo
;
*/
$json['state']='ok';
$json['start']=$page->getstart();
$json['end']=$page->getend();
$json['page']=$page->getpage();
$json['data']=$list;
echo json_encode($json);
//exit();
}
做这分页的时候由于是ajax，html代码生成都在客户端。经过我观察这分页类存在问题。实际上许多代码都没必要存在。有时间我去把他干掉。附上代码 page.class.php
[php] 条记录,
'prev' => 上一页,
'next' => 下一页,
'first'=> 首页,
'last' => 末页
); //在分页信息中显示内容，可以自己通过set()方法设置
private $listnum = 10; //默认分页列表显示的个数
/**
构造方法，可以设置分页类的属性
@param int $total 计算分页的总记录数
@param int $listrows 可选的，设置每页需要显示的记录数，默认为25条
@param mixed $query 可选的，为向目标页面传递参数,可以是数组，也可以是查询字符串格式
@param bool $ord 可选的，默认值为true, 页面从第一页开始显示，false则为最后一页
*/
public function __construct($total, $listrows=25, $query=, $ord=true){
$this->total = $total;
$this->listrows = $listrows;
$this->uri = $this->geturi($query);
$this->pagenum = ceil($this->total / $this->listrows);
/*以下判断用来设置当前面*/
if(!empty($_get[page])) {
$page = $_get[page];
}else{
if($ord)
$page = 1;
else
$page = $this->pagenum;
}
if($total > 0) {
if(preg_match('/\d/', $page) ){
$this->page = 1;
}else{
$this->page = $page;
}
}else{
$this->page = 0;
}
$this->limit = limit .$this->getlimit();
}
/**
用于设置显示分页的信息，可以进行连贯操作
@param string $param 是成员属性数组config的下标
@param string $value 用于设置config下标对应的元素值
@return object 返回本对象自己$this， 用于连惯操作
*/
function set($param, $value){
if(array_key_exists($param, $this->config)){
$this->config[$param] = $value;
}
return $this;
}
/* 不是直接去调用，通过该方法，可以使用在对象外部直接获取私有成员属性limit和page的值 */
function __get($args){
if($args == limit || $args == page)
return $this->$args;
else
return null;
}
/**
按指定的格式输出分页
@param int 0-7的数字分别作为参数，用于自定义输出分页结构和调整结构的顺序，默认输出全部结构
@return string 分页信息内容
*/
function fpage(){
$arr = func_get_args();
$html[0] = 共 {$this->total} {$this->config[head]} ;
$html[1] = 本页 .$this->disnum(). 条 ;
$html[2] = 本页从 {$this->start()}-{$this->end()} 条 ;
$html[3] = {$this->page}/{$this->pagenum}页 ;
$html[4] = $this->firstprev();
$html[5] = $this->pagelist();
$html[6] = $this->nextlast();
$html[7] = $this->gopage();
$fpage = '
';
if(count($arr) $arr = array(0, 1,2,3,4,5,6,7);
for($i = 0; $i $fpage .= $html[$arr[$i]];
$fpage .= '
';
return $fpage;
}
/* 格式为 1,5，*/
function getlimit(){
if($this->page > 0)
return ($this->page-1)*$this->listrows.,{$this->listrows};
else
return 0;
}
//当前的页面
function getpage(){
return $this->page;
}
//分页的开始
function getstart(){
$num1=$this->page-4;
return $num1>0?$num1:1;
}
//分页的结束
function getend(){
$num1=$this->pagenum;
$num2=$this->page+5;
return $num1 }
/* 在对象内部使用的私有方法，用于自动获取访问的当前url */
private function geturi($query){
$request_uri = $_server[request_uri];
$url = strstr($request_uri,'?') ? $request_uri : $request_uri.'?';
if(is_array($query))
$url .= http_build_query($query);
else if($query != )
$url .= &.trim($query, ?&);
$arr = parse_url($url);
if(isset($arr[query])){
parse_str($arr[query], $arrs);
unset($arrs[page]);
$url = $arr[path].'?'.http_build_query($arrs);
}
if(strstr($url, '?')) {
if(substr($url, -1)!='?')
$url = $url.'&';
}else{
$url = $url.'?';
}
return $url;
}
/* 在对象内部使用的私有方法，用于获取当前页开始的记录数 */
private function start(){
if($this->total == 0)
return 0;
else
return ($this->page-1) * $this->listrows+1;
}
/* 在对象内部使用的私有方法，用于获取当前页结束的记录数 */
private function end(){
return min($this->page * $this->listrows, $this->total);
}
/* 在对象内部使用的私有方法，用于获取上一页和首页的操作信息 */
private function firstprev(){
if($this->page > 1) {
$str = uri}page=1'>{$this->config[first]} ;
$str .= uri}page=.($this->page-1).'>{$this->config[prev]} ;
return $str;
}
}
/* 在对象内部使用的私有方法，用于获取页数列表信息 */
private function pagelist(){
$linkpage = ;
$inum = floor($this->listnum/2);
/*当前页前面的列表 */
for($i = $inum; $i >= 1; $i--){
$page = $this->page-$i;
if($page >= 1)
$linkpage .= uri}page={$page}'>{$page} ;
}
/*当前页的信息 */
if($this->pagenum > 1)
$linkpage .= {$this->page} ;
/*当前页后面的列表 */
for($i=1; $i $page = $this->page+$i;
if($page pagenum)
$linkpage .= uri}page={$page}'>{$page} ;
else
break;
}
$linkpage .= '';
return $linkpage;
}
/* 在对象内部使用的私有方法，获取下一页和尾页的操作信息 */
private function nextlast(){
if($this->page != $this->pagenum) {
$str = uri}page=.($this->page+1).'>{$this->config[next]} ;
$str .= uri}page=.($this->pagenum).'>{$this->config[last]} ;
return $str;
}
}
/* 在对象内部使用的私有方法，用于显示和处理表单跳转页面 */
private function gopage(){
if($this->pagenum > 1) {
return ' '.$this->pagenum.')?'.$this->pagenum.':this.value;location=\''.$this->uri.'page=\'+page+\'\'} value='.$this->page.'>'.$this->pagenum.')?'.$this->pagenum.':this.previoussibling.value;location=\''.$this->uri.'page=\'+page+\'\'> ';
}
}
/* 在对象内部使用的私有方法，用于获取本页显示的记录条数 */
private function disnum(){
if($this->total > 0){
return $this->end()-$this->start()+1;
}else{
return 0;
}
}
}
条记录,
'prev' => 上一页,
'next' => 下一页,
'first'=> 首页,
'last' => 末页
); //在分页信息中显示内容，可以自己通过set()方法设置
private $listnum = 10; //默认分页列表显示的个数
/**
构造方法，可以设置分页类的属性
@param int $total 计算分页的总记录数
@param int $listrows 可选的，设置每页需要显示的记录数，默认为25条
@param mixed $query 可选的，为向目标页面传递参数,可以是数组，也可以是查询字符串格式
@param bool $ord 可选的，默认值为true, 页面从第一页开始显示，false则为最后一页
*/
public function __construct($total, $listrows=25, $query=, $ord=true){
$this->total = $total;
$this->listrows = $listrows;
$this->uri = $this->geturi($query);
$this->pagenum = ceil($this->total / $this->listrows);
/*以下判断用来设置当前面*/
if(!empty($_get[page])) {
$page = $_get[page];
}else{
if($ord)
$page = 1;
else
$page = $this->pagenum;
}
if($total > 0) {
if(preg_match('/\d/', $page) ){
$this->page = 1;
}else{
$this->page = $page;
}
}else{
$this->page = 0;
}
$this->limit = limit .$this->getlimit();
}
/**
用于设置显示分页的信息，可以进行连贯操作
@param string $param 是成员属性数组config的下标
@param string $value 用于设置config下标对应的元素值
@return object 返回本对象自己$this， 用于连惯操作
*/
function set($param, $value){
if(array_key_exists($param, $this->config)){
$this->config[$param] = $value;
}
return $this;
}
/* 不是直接去调用，通过该方法，可以使用在对象外部直接获取私有成员属性limit和page的值 */
function __get($args){
if($args == limit || $args == page)
return $this->$args;
else
return null;
}
/**
按指定的格式输出分页
@param int 0-7的数字分别作为参数，用于自定义输出分页结构和调整结构的顺序，默认输出全部结构
@return string 分页信息内容
*/
function fpage(){
$arr = func_get_args();
$html[0] = 共 {$this->total} {$this->config[head]} ;
$html[1] = 本页 .$this->disnum(). 条 ;
$html[2] = 本页从 {$this->start()}-{$this->end()} 条 ;
$html[3] = {$this->page}/{$this->pagenum}页 ;
$html[4] = $this->firstprev();
$html[5] = $this->pagelist();
$html[6] = $this->nextlast();
$html[7] = $this->gopage();
$fpage = '
';
if(count($arr) $arr = array(0, 1,2,3,4,5,6,7);
for($i = 0; $i $fpage .= $html[$arr[$i]];
$fpage .= '
';
return $fpage;
}
/* 格式为 1,5，*/
function getlimit(){
if($this->page > 0)
return ($this->page-1)*$this->listrows.,{$this->listrows};
else
return 0;
} //当前的页面
function getpage(){
return $this->page;
}
//分页的开始
function getstart(){
$num1=$this->page-4;
return $num1>0?$num1:1;
}
//分页的结束
function getend(){
$num1=$this->pagenum;
$num2=$this->page+5;
return $num1 }
/* 在对象内部使用的私有方法，用于自动获取访问的当前url */
private function geturi($query){
$request_uri = $_server[request_uri];
$url = strstr($request_uri,'?') ? $request_uri : $request_uri.'?';
if(is_array($query))
$url .= http_build_query($query);
else if($query != )
$url .= &.trim($query, ?&);
$arr = parse_url($url);
if(isset($arr[query])){
parse_str($arr[query], $arrs);
unset($arrs[page]);
$url = $arr[path].'?'.http_build_query($arrs);
}
if(strstr($url, '?')) {
if(substr($url, -1)!='?')
$url = $url.'&';
}else{
$url = $url.'?';
}
return $url;
}
/* 在对象内部使用的私有方法，用于获取当前页开始的记录数 */
private function start(){
if($this->total == 0)
return 0;
else
return ($this->page-1) * $this->listrows+1;
}
/* 在对象内部使用的私有方法，用于获取当前页结束的记录数 */
private function end(){
return min($this->page * $this->listrows, $this->total);
}
/* 在对象内部使用的私有方法，用于获取上一页和首页的操作信息 */
private function firstprev(){
if($this->page > 1) {
$str = uri}page=1'>{$this->config[first]} ;
$str .= uri}page=.($this->page-1).'>{$this->config[prev]} ;
return $str;
}
}
/* 在对象内部使用的私有方法，用于获取页数列表信息