使用ajax分页

前台页面:

                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th class=‘hidden-xs‘>代号</th>
                          <th>用户名</th>
                          <th class=‘hidden-xs‘>产品代号</th>
                          <th class=‘hidden-xs‘>观看类型</th>
                          <th class=‘hidden-xs‘>审核状态</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="zy_bg">

                      </tbody>
                    </table>
                    <!--表格结束-->
                    <!--分页开始-->
                    <center>
                    <ul class="pagination" id="fy_list">
                    </ul>
                    <input type="hidden" value="1" id="fy_n" />//显示的页数
                    </center>
                    <!--分页结束-->

                </div>
            </div>

        </div>
    </div>
  </div>
</div>
<!--内容结束-->
<script type="text/javascript">
 $(document).ready(function(e) {
	 //获取分页
	JiaZai();
	var zys = 0;//设初始总页数为0
	//页面加载数据
	 function JiaZai()//做一个加载的方法
	{
		var n = $("#fy_n").val();
           $.ajax({
				url:"chuli/chakan.php",
				data:{n:n},
				type:"POST",
				dataType:"JSON",
				success: function(data){
						var str ="";
						for(var i in data)
						{
						  str = str+"<tr><th>"+data[i].code+"</th><th>"+data[i].bname+"</th><th>"+data[i].pdcode+"</th><th>"+data[i].lxcode+"</th><th>"+data[i].auditing+"</th><th>删除</th></tr>";

						}
						$("#zy_bg").html(str);

			 	   }
			  });

			  //获取分页数(列表)

		$.ajax({
				url:"chuli/zyxchuli.php",
				dataType:"TEXT",
					success: function(data){
						//总页数
						var ys = Math.ceil(data/6);//向上取整页数
						zys = ys;

						var s = "<li><a id=‘fy_shang‘>上一页</a></li>";
						var dangqian = $("#fy_n").val(); //当前页数
						for(var i=dangqian-2;i<=dangqian+2;i++)//显示的五条页数
						{
							if(i>0 && i<=ys)
							{
							if(dangqian==i)
							{
							s+="<li class=‘active‘><a class=‘fy_zhong‘>"+i+"</a></li>";
							}
							else
							{
								s+="<li><a class=‘fy_zhong‘>"+i+"</a></li>"
							}
							}
						}
						s += "<li><a id=‘fy_xia‘>下一页</a></li>";
						$("#fy_list").html(s);

                   		//给分页列表加事件
						JiaShiJian();
					}
				})
	 }
	//给分页列表加事件的方法
	function JiaShiJian()
	{
		$("#fy_shang").click(function(){
				var n = $("#fy_n").val(); 

				if(n>1)
				{
					n--;
				}
				else
				{
					n=1;
				}
				$("#fy_n").val(n);

				//加载数据
				JiaZai();
			})
		$("#fy_xia").click(function(){
				var n = $("#fy_n").val(); 

				if(n<zys)
				{
					n++;
				}
				else
				{
					n=zys;
				}
				$("#fy_n").val(n);

				//加载数据
				JiaZai();
			})
		$(".fy_zhong").click(function(){//点击页数跳转到当前页
				var n = $(this).text();
				$("#fy_n").val(n);

				//加载数据
				JiaZai();
			})
	}

   });

</script>

  后台处理页面 需要引用一个封装查询的方法,后台处理页面(chakan.php):

<?php
session_start();
include("../DBDA.class.php");
$db = new DBDA();
$uid = $_SESSION["uid"];
$n = $_POST["n"];
//echo $n;
$tg = ($n-1)*6;
$sql = "select * from buy where bname=‘{$uid}‘  limit {$tg},6";//查询有关用户名的数据,limit {$tg},6 是跳过n条数据查6条数据
echo json_encode($db->GuanQuery($sql),1);

  后台处理页面(zyxchuli.php):

<?php
session_start();
$uid = $_SESSION["uid"];
include("../DBDA.class.php");
$db = new DBDA();
$sqlsj = "select count(*) from buy where bname=‘{$uid}‘";//查询有关用户名的数据总数量
echo $db->StrQuery($sqlsj,1);

  

时间: 2024-12-28 05:30:41

使用ajax分页的相关文章

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

Django - Ajax分页

目前总结了2种方法: 1. Ajax 分页 尼玛各种google,stackoverflow,搞了好久才总结出这个,之前使用Pagination tag loading的方式不好用,并且不能进行ajax提交请求的页面无刷新的方式去分页 1.view.py 1 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 2 from django.shortcuts import render 3 def xxx

瀑布流ajax分页

index.jsp 1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 6 <title>图片&

ajax 分页完全代码整理

/* ajax分页 */var page_cur = 1; //当前页 var total_num, page_size, page_total_num;//总记录数,每页条数,总页数function getData(page) { //获取当前页数据     $.ajax({          type: 'GET',          url: 处理数据地址,          data: {              'page': page,              'catid': 

jQuery、Ajax分页

1.效果图预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable"> <

jquery ajax分页插件特效源代码demo完整版

原文:jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm 网上找的,原版本没有测试数据和建表脚本啥的,我给加上了.

Pagination jquery ajax 分页参考资料

http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/ 个人博客参考 中文项目地址:http://www.zhangxinxu.com/jq/pagination_zh/ 原项目地址:http://plugins.jquery.com/project/pagination 版

codeigniter实现ajax分页

<?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends CI_Pagination{ public function __construct() { parent::__construct(); } /** * Generate the pagination links * * @access public * @return string */ function create_ajax_links() { // If our

MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的UpdateTargetId属性,该属性值即是分页后要通过Ajax来更新的 DOM 元素的 ID. Ajax.Pager()方法返回AjaxPager对象,您可以通过Ajax.Pager()方法的重载来传递PagerOptions和MvcAjaxOptions参数,也可以通过新的AjaxPager的Opti

yii下多条件多表组合查询以及自写ajax分页

多条件组合查询主要用到yii的CDbCriteria,这个类很多oem框架都有,非常好用. 前台查询表单效果是这样的,多个条件组,每个组里放多个input,name为数组.当任何一个复选框被勾选上,发起ajax请求,当然,最顶层的复选框勾上时判断是否有子项,有的话把所有的子项勾选上. 但提交一次请求会向服务端post这样一个表单 其中currentPage是隐藏字段,当分页按钮被点击是这个字段的值会发生变化,并且发起查询请求. 这个表单会提交到如下的action中进行处理 1 <?php 2 3