今天是学习做后台页面布局，用得是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 = '
';
var mainData = $("#main #mainData");
mainData.html(テーブル_html);
mainData.append(page_html);
admin_content_page(page_page,page_end); //挂接分页点击イベント
}
//アラート(json.data);
}、
エラー: function(xhr, textStatus, errorThrown) {
//エラーが発生した場合に呼び出されます
}
});
}
/**
* オンフックページングイベント
* パラメータ 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
戻る;
}
} else if (charStr == "«") {
num = parseInt(page_page) - 1;
if (数値
戻る;
}
}
admin_content(番号);
});
}
関数 admin_content_del (id) {
アラート(ID);
}
関数 getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:d{1,2}$/, ' ');
}
// JavaScript ドキュメント
$('body').off('.data-api');
$(ドキュメント).ready(関数(e) {
$("#menu a").click(function() {
switch ($(this).text()) {
case 'すべて留言':
admin_content(1);
休憩;
ケース「基本設置」:
$("#main #mainData").load('admin_config.html?r='+Math.random());
休憩;
デフォルト:
休憩;
}
});
$("#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 = '
';
var mainData = $("#main #mainData");
mainData.html(table_html);
mainData.append(page_html);
admin_content_page(page_page,page_end); //挂接分页点击イベント
}
//alert(json.data);
}、
エラー: function(xhr, textStatus, errorThrown) {
//エラーが発生したときに呼び出されます
}
});
}
/**
* オンフックページングイベント
* パラメータ 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
戻ります;
}
} else if (charStr == "«") {
num = parseInt(page_page) - 1;
if (数値
戻ります;
}
}
admin_content(番号);
});
}
関数 admin_content_del (id) {
アラート(ID);
}
関数 getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:d{1,2}$/, ' ');
}これは分割要求のサービス端代コードです
[php] パブリック関数 content()
{
//導入分页类
「page.class.php」を含める;
//data表のデータ量を取得します
$rows = $this->db->count('select * from data');
//创建分页对象
$page = 新しいページ($rows, 5, "");
$list=$this->db
->order('id DESC')
->テーブル('データ')
->limit($page->getLimit())
->select();
/*
echo "
";<br>
var_dump($list);<br>
echo "
ログイン後にコピー
";
*/
$json['状態']='ok';
$json['start']=$page->getStart();
$json['end']=$page->getEnd();
$json['page']=$page->getPage();
$json['data']=$list;
エコー json_encode($json);
//出口（）;
}
パブリック関数content()
{
//ページングクラスを導入します
「page.class.php」をインクルードします;
//データテーブル内のデータ数を取得します
$rows = $this->db->count('select * from data');
//ページングオブジェクトを作成します
$page = 新しいページ($rows, 5, "");
$list=$this->db
->order('id DESC')
->テーブル('データ')
->limit($page->getLimit())
->select();
/*
echo "
";<br>
var_dump($list);<br>
echo "
ログイン後にコピー
";
*/
$json['state']='ok';
$json['start']=$page->getStart();
$json['end']=$page->getEnd();
$json['page']=$page->getPage();
$json['data']=$list;
echo json_encode($json);
//終了();
}
このページングを行う場合、ajax であるため、HTML コードの生成はすべてクライアント側で行われます。私の観察の結果、このページング クラスには問題があることがわかりました。実際、コードの多くは存在する必要はありません。時間があれば彼を殺します。
コードpage.class.phpを添付します
[php]
/**
ファイル: page.class.php
完璧なページングタイプのページ
@WeiliangQQ496928838
*/
クラスページ {
プライベート $total;
プライベート $listRows;
Private $ Limit; // SQL ステートメントはレコード数を制限するために limit 句を使用します
private $uri // URL のリクエストアドレスを自動取得します
;
プライベート $pageNum;
プライベート $page;
private $config = array(
「ヘッド」=>「記録」、
'prev' => "前のページ"、
'next' => "次のページ"、
'first'=>「ホーム」、
「last」 => 「最後のページ」
Private $ listnum = 10 // デフォルトのレイアウトリストで表示される番号
;
/**
コンストラクターメソッドでは、ページングクラスのプロパティを設定できます
「S ’’ ’S」は、一緒に一緒に一緒に一緒に一緒に一緒にアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウト
@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["ページ"];
}その他{
if($ord)
$ページ = 1;
その他
$page = $this->pageNum;
}
if($total > 0) {
if(preg_match('/D/', $page) ){
$this->ページ = 1;
}その他{
$this->page = $page;
}
}その他{
$this->ページ = 0;
}
$this->limit = "LIMIT ".$this->getLimit();
}
/**
ページを表示するための情報を設定するために使用され、一貫した操作を実行できます
@param 文字列 $param はメンバー属性配列 config の添字です
@param string $value は、構成の添字に対応する要素の値を設定するために使用されます
@Return Object このオブジェクト自体に戻ります $ this、操作に接続するために使用されます
*/
関数セット($param, $value){
if(array_key_exists($param, $this->config)){
$this->config[$param] = $value;
}
$this を返します。
}
/* 直接去调用ではなく、この方法により、オブジェクト外部で直接取得できるプロパティ制限とページの値を使用できます */
関数 __get($args){
if($args == "制限" || $args == "ページ")
$this->$args; を返します。
その他
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 .= '
';
$fpage を返す
}
/* 形式は 1,5,*/
関数 getLimit(){
If($this->ページ > 0)
return ($this->page-1)*$this->listRows.",{$this->listRows}";
その他
0 を返す
}
//現在のページ
関数 getPage(){
$this-> ページに戻る
}
// ページングの開始
関数 getStart(){
$num1=$this->page-4;
return $num1>0?$num1:1;
}
// ページングの終了
関数 getEnd(){
$num1=$this->pageNum;
$num2=$this->page+5;
$num1
}
/* オブジェクト内で使用されるプライベート メソッド。アクセスされた現在の URL を自動的に取得するために使用されます */
プライベート関数 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["クエリ"])){
parse_str($arr["query"], $arrs);
unset($arrs["page"]);
$url = $arr["path"].'?'.http_build_query($arrs);
If(strstr($url, '?')) {
If(substr($url, -1)!='?')
$url = $url.'&';
}その他{
$url = $url.'?';
$url を返します
}
/* オブジェクト内で使用されるプライベート メソッド。現在のページの先頭にあるレコード数を取得するために使用されます */
プライベート関数 start(){
If($this->total == 0)
0 を返す
その他
return ($this->page-1) * $this->listRows+1;
}
/* 現在のページの末尾のレコード数を取得するためにオブジェクト内で使用されるプライベート メソッド */
プライベート関数 end(){
return min($this->page * $this->listRows, $this->total
);
}
/* オブジェクト内で使用されるプライベートメソッド。前のページとホームページの操作情報を取得するために使用されます */
プライベート関数 firstprev(){
If($this->ページ > 1) {
$str = "
{$this->config["first"]} ";
$str .= "
{$this->config["prev"] };
$str; を返します。
}
/* ページ番号リスト情報を取得するためにオブジェクト内で使用されるプライベート メソッド */
プライベート関数 pageList(){
$linkPage = "
";
$inum = フロア($this->listNum/2);
/*現在のページの前にリスト
for($i = $inum; $i >= 1; $i--){
$page = $this->page-$i;
if（$ page＆gt; = 1）
$linkPage .= "{$page} ";
/*現在のページの情報*/
If($this->pageNum > 1)
$linkPage .= "{$this->page} ";
/ *現在のページの後ろにあるリスト * /
for($i=1; $i $page = $this->page+$i;
If($page pageNum)
$linkPage .= "{$page} ";
それ以外
休憩
$linkPage .= '';
$linkPage を返す
}
/* 次のページと最後のページの操作情報を取得するためにオブジェクト内で使用されるプライベート メソッド */
プライベート関数 nextlast(){
If($this->page != $this->pageNum) {
$str = "
{$this->config["next"]} ;
$str .= "
{$this->config["last"]}< ;/a> ";
$str; を返します。
}
/* オブジェクト内で使用されるプライベート メソッド。フォーム ジャンプ ページの表示と処理に使用されます */
プライベート関数 goPage(){
If($this->pageNum > 1) {
return ' ';
}
/* このページに表示されるレコード数を取得するためにオブジェクト内で使用されるプライベート メソッド */
プライベート関数 disnum(){
If($this->合計 > 0){
return $this->end()-$this->start()+1;
}その他{
0 を返す
}
}
/**
ファイル: page.class.php
完璧なページングタイプのページ
@微クールQQ496928838
*/
クラスページ{
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 です
@parammixed$queryオプション、ターゲットページにパラメータを渡すために、配列またはクエリ文字列形式にすることができます
@param bool $ord オプション、デフォルト値は true、ページは最初のページから表示され、false は最後のページになります
*/
パブリック関数 __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["ページ"];
}その他{
もし($ord)
$ページ = 1;
それ以外
$page = $this->pageNum;
}
if($total > 0) {
If(preg_match('/D/', $page) ){
$this->ページ = 1;
}その他{
$this->page = $page;
}
}その他{
$this->ページ = 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 .= '
';
$fpage を返します;
}
/* 形式は 1,5,*/
関数 getLimit(){
if($this->ページ > 0)
Return ($this->page-1)*$this->listRows.",{$this->listRows}";
それ以外
0 を返す;
}
//現在のページ
関数 getPage(){
$this->page を返す;
}
// ページネーションの開始
関数 getStart(){
$num1=$this->page-4;
$num1>0?$num1:1;
を返す
}
//ページネーション終了
関数 getEnd(){
$num1=$this->ページ番号;
$num2=$this->ページ+5;
$num1
}
/* アクセスした現在の URL を自動的に取得するためにオブジェクト内で使用されるプライベート メソッド */
プライベート関数 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["クエリ"], $arrs);
unset($arrs["ページ"]);
$url = $arr["path"].'?'.http_build_query($arrs);
}
if(strstr($url, '?')) {
If(substr($url, -1)!='?')
$url = $url.'&';
}その他{
$url = $url.'?';
}
$url を返します;
}
/* 現在のページから始まるレコード数を取得するためにオブジェクト内で使用されるプライベート メソッド */
プライベート関数 start(){
if($this->total == 0)
0 を返す;
それ以外
Return ($this->page-1) * $this->listRows+1;
}
/* 現在のページの末尾のレコード数を取得するためにオブジェクト内で使用されるプライベート メソッド */
プライベート関数 end(){
Return min($this->page * $this->listRows, $this->total);
}
/* 前ページとホームページの操作情報を取得するためにオブジェクト内で使用されるプライベートメソッド */
プライベート関数 firstprev(){
if($this->ページ > 1) {
$str = " {$this->config["first"]} ";
$str .= "{$this->config["prev"] }
;
$str;
を返します
}
}
/* ページリスト情報を取得するためにオブジェクト内で使用されるプライベートメソッド
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
