今天是学习做后台页面布局，用得是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 = '
| 操作 | 用户名 | 留言内容 | 发表时间 |
|---|---|---|---|
| 删除 | ' + data[i].userName + ' | ' + data[i].content + ' |
' + getLocalTime(data[i].time) + ' |
// 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 = '
| 操作 | 用户名 | 留言内容 | 发表时间 |
|---|---|---|---|
| 删除 | ' + data[i].userName + ' | ' + data[i].content + ' |
' + getLocalTime(data[i].time) + ' |
/**
*生成分页
*/
var page_html = '
}
if (page_end !== 0) {
if (page_page == page_end) {
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 "
";<br> var_dump($list);<br> echo "
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 "
";<br> var_dump($list);<br> echo "
附上代码 page.class.php
[php]
/**
file: page.class.php
完美分页类 Page
@微凉 QQ496928838
*/
class Page {
private $total; //数据表中总记录数
private $listRows; //每页显示行数
private $limit; //SQL语句使用limit从句,限制获取记录个数
private $uri; //自动获取url的请求地址
private $pageNum; //总页数
private $page; //当前页
private $config = array(
'head' => "条记录",
'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 = '
/**
file: page.class.php
完美分页类 Page
@微凉 QQ496928838
*/
class Page {
private $total; //数据表中总记录数
private $listRows; //每页显示行数
private $limit; //SQL语句使用limit从句,限制获取记录个数
private $uri; //自动获取url的请求地址
private $pageNum; //总页数
private $page; //当前页
private $config = array(
'head' => "条记录",
'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 = '
//当前的页面
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 = " ";
How to open php file
How to remove the first few elements of an array in php
What to do if php deserialization fails
How to connect php to mssql database
How to connect php to mssql database
What to do if an error occurs in the script of the current page
How to upload html
How to solve garbled characters in PHP
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
