//控制器層

//分頁
public function list_january_table(){

//設置當前頁
$page = input("post.page") ? input("post.page") : 1;
//設置每頁顯示條數
$size = 3;
//查詢總條數
$num = Db::table("January_table")->count();
//查詢總頁數
$end = ceil($num/$size);
//計算偏移量
$offset = ($page-1)*$size;
//查詢所有條數
$data = Db::table("January_table")->limit($offset,$size)->select();
//手機號碼中獎四位隱藏
foreach ($data as $key=>$val){
$data[$key]['mobile']=substr($val['mobile'],0,3).'****'.substr($val['mobile'],7,4);
}
return view("list_January_table",['list'=>$data,'end'=>$end]);
}

//ajax分頁&搜索后分頁
public function ajax_page_January_table(){
$search = input("post.search");
if ($search==""){
//設置當前頁
$page = input("post.page") ? input("post.page") : 1;
//設置每頁顯示條數
$size = 3;
//查詢總條數
$num = Db::table("January_table")->count();
//查詢總頁數
$end = ceil($num/$size);
//計算偏移量
$offset = ($page-1)*$size;
//查詢所有條數
$data = Db::table("January_table")->limit($offset,$size)->select();
}else{
//設置當前頁
$page = input("post.page") ? input("post.page") : 1;
//設置每頁顯示條數
$size = 3;
//查詢總條數
$num = Db::table("January_table")->where('username','like',"%$search%")->count();
//查詢總頁數
$end = ceil($num/$size);
//計算偏移量
$offset = ($page-1)*$size;
//查詢所有條數
$data = Db::table("January_table")->where('username','like',"%$search%")->limit($offset,$size)->select();
}
return json($data);
}

//視圖層

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展示頁面</title>
</head>
<body>
<center>
<h1>展示頁面</h1>
<input type="text" name="search" id="search"><input type="button" class="page" value="搜索">
<table border="1">
<tr>
<td>選擇</td>
<td>班名</td>
<td>年齡</td>
<td>性別</td>
<td>簡介</td>
<td>手機</td>
<td>頭像</td>
<td>詳情</td>
<td>操作</td>
</tr>
<tbody id="tb">
{volist name="list" id="vo"}
<tr id="{$vo.id}">
<td><input type="checkbox" name="check" value="{$vo.id}">{$vo.id}</td>
<td fd="username" class="cli_up">{$vo.username}</td>
<td>{$vo.age}</td>
<td ida="{$vo.id}" class="up_time">
{if condition="$vo.sex neq '1'"}男
{else /} 女
{/if}
</td>
<td>{$vo.desc}</td>
<td>{$vo.mobile}</td>
<td><img src="__STATIC__/uploads/{$vo.photo}" width="80px" alt=""></td>
<td>{$vo.content}</td>
<td><a href="javascript:void (0)" class="del" id_del="{$vo.id}">刪除</a></td>
</tr>
{/volist}
</tbody>
</table>
<a href="{:url('Index/add_January_Table')}">添加</a>
<input type="button" class="yes" value="全選">
<input type="button" class="no" value="全不選">
<input type="button" class="yn" value="反選">
<input type="button" class="del_all" value="批量刪除">
<input type="hidden" name="a_page" id="a_page" value="1">
<input type="hidden" name="last_page" id="last_page" value="{$end}">
<a href="javascript:void (0)" class="page">首頁</a>
<a href="javascript:void (0)" class="page">上一頁</a>
<a href="javascript:void (0)" class="page">下一頁</a>
<a href="javascript:void (0)" class="page">尾頁</a>
</center>
<script src="__STATIC__/jquery-3.3.1.min.js"></script>
<script>
//刪除
$(document).on("click",".del",function () {
var id = $(this).attr("id_del");
$.ajax({
url:"{:url('Index/del_January_table')}",
type:"get",
datatype:"json",
data:{
id:id,
},
success:function (data) {
if (data==1){
history.go(0);
} else {
alert("刪除失敗")
}
}
})
})
//批量刪除
$(document).on("click",".del_all",function () {
var check = document.getElementsByName("check");
var str= "";
for (i=0;i<check.length;i++) {
if (check[i].checked == true) {
str += "," + check[i].value;
}
}
var id = str.substr(1);alert(id)
$.ajax({
url:"{:url('Index/del_January_table')}",
type:"get",
datatype:"json",
data:{
id:id,
},
success:function (data) {
if (data==1){
alert("刪除成功");
history.go(0);
} else {
alert("刪除失敗")
}
}
});
})
//全選
$(document).on("click",".yes",function () {
var check = document.getElementsByName("check");
for (i=0;i<check.length;i++){
if (check[i].checked==false){
check[i].checked = true;
}
}
})
//全不選
$(document).on("click",".no",function () {
var check = document.getElementsByName("check");
for (i=0;i<check.length;i++){
if (check[i].checked==true){
check[i].checked = false;
}
}
})
//反選
$(document).on("click",".yn",function () {
var check = document.getElementsByName("check");
for (i=0;i<check.length;i++){
if (check[i].checked==true){
check[i].checked = false;
}else {
check[i].checked = true;
}
}
})
//即時更改
$(document).on("click",".up_time",function () {
var id = $(this).attr("ida");
var sex = $(this).text();
var obj = $(this);
$.ajax({
url:"{:url('Index/up_time_January_table')}",
type:"post",
datatype:"json",
data:{
id:id,
sex:sex,
},
success:function (data) {
if (data.code==1){
obj.html(data.message);
}else {
obj.html(data.message);
}
}
});
})
//即點即改
$(document).ready(function () {
$(".cli_up").dblclick(function () {
var id = $(this).parent().attr("id");
var fd = $(this).attr("fd");
var text = $(this).text();
var td = $(this);
$(this).html('<input type="text" class="cli'+id+fd+'" value="'+text+'">');
$(".cli"+id+fd).blur(function () {
var new_val = $(this).val();
$.ajax({
url:"{:url('Index/update_January_table')}",
type:"post",
datatype:"json",
data:{
id:id,
fd:fd,
new_val:new_val,
},
success:function (data) {
console.log(data);
if (data==1){
td.text(new_val);
} else {
td.text(text);
}
}
})
})
})
})
//ajax分頁&搜索
$(document).on("click",".page",function () {
var search = $("#search").val();
var a_val = $(this).text();
var a_page = $("#a_page").val();
var last_page = $("#last_page").val();
if (a_val=="首頁"){
var page = 1;
} else if (a_val=="上一頁"){
var page = parseInt(a_page)-1 < 1 ? 1 : parseInt(a_page)-1;
} else if (a_val=="下一頁"){
var page = parseInt(a_page)+1 > last_page ? last_page : parseInt(a_page)+1;
} else if (a_val=="尾頁"){
var page = last_page;
}
$.ajax({
url:"{:url('Index/ajax_page_January_table')}",
type:"post",
datatype:"json",
data:{
page:page,
search:search,
},
success:function (data) {
var str = "";
$.each(data,function (key,val) {
str+='<tr>\n' +
' <td><input type="checkbox" name="check">'+val.id+'</td>\n' +
' <td>'+val.username+'</td>\n' +
' <td>'+val.age+'</td>\n' +
' <td ida="'+val.id+'" class="up_time">'+val.sex+'</td>\n' +
' <td>'+val.desc+'</td>\n' +
' <td>'+val.mobile+'</td>\n' +
' <td><img src="__STATIC__/uploads/'+val.photo+'" width="80px" alt=""></td>\n' +
' <td>'+val.content+'</td>\n' +
' <td><a href="javascript:void (0)">刪除</a></td>\n' +
' </tr>';
})
$("#tb").html(str);
$("#a_page").val(page);
}
})
})
</script>
</body>
</html>

thinkphp5ajax分頁&&搜索後分頁的更多相关文章

  1. Solr系列六：solr搜索详解优化查询结果（分面搜索、搜索结果高亮、查询建议、折叠展开结果、结果分组、其他搜索特性介绍）

    一.分面搜索 1. 什么是分面搜索? 分面搜索:在搜索结果的基础上进行按指定维度的统计,以展示搜索结果的另一面信息.类似于SQL语句的group by 分面搜索的示例: http://localhos ...

  2. solr 分面搜索（转载）

    原文地址:http://blog.csdn.net/bingduanlbd/article/details/52199347 分面搜索(Faceting)基于索引词项对搜索结果进行分类,同时返回每个分 ...

  3. [心得] SQL Server Partition(表分區) 資料分佈探討

    最近在群裡有個朋友問了個問題是這樣的 用户表有一千多万行,主键是用户ID,我做了分区.但经常查询时,其它的表根据用户ID来关联,这样跨区查询,reads非常高.有什么好的处理办法?不分区的话,索引维护 ...

  4. 获取数值型数组中大于60的元素个数，给数值型数组中不足60分的加20分。（数组，for循环，if条件判断语句）

    package com.Summer_0420.cn; /** * @author Summer * 获取数值型数组中大于60的元素个数 * 给数值型数组中不足60分的加20分 */ public c ...

  5. 9.9递归和动态规划（八）——给定数量不限的硬币，币值为25分，10分，5分，1分，计算n分有几种表示法

    /**  * 功能:给定数量不限的硬币.币值为25分,10分.5分.1分,计算n分有几种表示法. */ public static int makeChange(int n){ return make ...

  6. 计蒜客 39280.Travel-二分+最短路dijkstra-二分过程中保存结果，因为二分完最后的不一定是结果 (The 2019 ACM-ICPC China Shannxi Provincial Programming Contest M.) 2019ICPC西安邀请赛现场赛重现赛

    Travel There are nn planets in the MOT galaxy, and each planet has a unique number from 1 \sim n1∼n. ...

  7. 【转】mysql分库分表,数据库分库分表思路

    原文:https://www.cnblogs.com/butterfly100/p/9034281.html 同类参考:[转]数据库的分库分表基本思想 数据库分库分表思路   一. 数据切分 关系型数 ...

  8. 大数据学习----day27----hive02------1. 分桶表以及分桶抽样查询 2. 导出数据 3.Hive数据类型 4 逐行运算查询基本语法（group by用法，原理补充） 5.case when（练习题，多表关联）6 排序

    1. 分桶表以及分桶抽样查询 1.1 分桶表 对Hive(Inceptor)表分桶可以将表中记录按分桶键(某个字段对应的的值)的哈希值分散进多个文件中,这些小文件称为桶. 如要按照name属性分为3个 ...

  9. 二分查找(通过相对位置判断区间位置)--17--二分--LeetCode33搜索旋转排序数组

    搜索旋转排序数组 假设按照升序排序的数组在预先未知的某个点上进行了旋转.( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中 ...

随机推荐

  1. intel edison with grove lcd

    由intel xdk,例如,下面的过程能够打印Hello world至grove lcd上 var mraa = require ('mraa'); var LCD = require ('jsupm ...

  2. Word 公式排版（使用制表符）

    公式的构成: 公式: 右编号: 法一:使用 3 行 1 列的表格 Word论文写作如何实现公式居中.编号右对齐_百度经验 修改三个单元格之间的长度比例关系时,其位置是在: [表格属性]⇒ [单元格]选 ...

  3. Centos下一个server安装的版本号mysql

    首先这里说的是这里的路径.以及语句都是在网上看了非常多错误后自己实践后改动过来的,希望对大家实用. 这里在安装的时候要按着我的这个顺序.否则可能会由于路径错误而找不到对应的指令. 一.安装cmake ...

  4. python 运行出现flask运行时提示出错了或者报服务器出错,ValueError: View function did not return a response

    python manage.py runserver -d

  5. 图像滤镜艺术---Oilpaint油画滤镜

    原文:图像滤镜艺术---Oilpaint油画滤镜  Oilpaint油画滤镜     图像油画效果实际上是将图像边缘产生一种朦胧,雾化的效果,同时,将一定的边缘模糊化,这样图像整体上看去像素与像素之间 ...

  6. VS2010调试X86汇编程序

    今天突然无聊了一下,想起之前想的用VS来调试汇编程序.之前只是想了一下,没有去做,好吧,今天搜索一下,找到了一个教程,相当的详细具体,我喜欢 按照http://blog.csdn.net/jinson ...

  7. python 动态调用模块&类&方法

    转载自:http://www.cnblogs.com/bluefrog/archive/2012/05/11/2496439.html 一直想知道python里有没有类似php中的 $classnam ...

  8. A simple in-process HTTP server for UWP

    原文 http://www.dzhang.com/blog/2012/09/18/a-simple-in-process-http-server-for-windows-8-metro-apps 简单 ...

  9. 在Azure中搭建Ghost博客并绑定自定义域名和HTTPS

    绪论 之前一直使用cnblog写博客,现在将博客迁移至Microsoft Azure上的Ghost博客上,Ghost博客使用Markdown书写博客,页面简洁,是我喜欢的风格.具体参见官网:https ...

  10. 以太坊（ethereum）开发DApp应用的入门区块链技术教程

    概述 对初学者,首先要了解以太坊开发相关的基本概念.   学习以太坊开发的一般前序知识要求,最好对以下技术已经有一些基本了解: 一种面向对象的开发语言,例如:Python,Ruby,Java... 前 ...