• ajax分页


    先将数据库的内容列出在页面

    <table class="table">
      <caption>基本的表格布局</caption>
      <thead>
        <tr>
          <th>地区代号</th>
          <th>地区名称</th>
          <th>父级代号</th>
        </tr>
      </thead>
      <tbody id="nr">
        
      </tbody>
    </table>
    <div style="30%; margin:0px auto;">
    	<ul class="pagination" id="pagelist">
        
    </ul>
    </div>
    做一个loadData方法LloadPageList方法

      var pcount = 12;//每一页显示多少条
      var page = 1;//当前页

    <?php
    require_once "./dbda/DBDA.class.php";
    $db = new DBDA();
    $page = $_POST["page"];
    $pcount = $_POST["pcount"];
    $name = $_POST["name"];
    $tj = " 1=1 ";
    if(!empty($name)){
    	$tj = " areaname like '%{$name}%' ";
    }
    
    $tg = ($page-1)*$pcount;
    $sql = "select * from chinastates where {$tj} limit {$tg},{$pcount}";
    echo $db->jsonquery($sql);
    

      上面是load的处理页面

    function loadData(){
    	var name = $("#name").val();
    	$.ajax({
    		url:"load.php",
    		data:{page:page,pcount:pcount,name:name},
    		type:"POST",
    		dataType:"JSON",
    		success: function(data){
    			var str = "";
    			/*for(var i=0;i<data.length;i++){
    				str += "<tr><td>"+data[i].AreaCode+"</td><td>"+data[i].AreaName+"</td><td>"+data[i].ParentAreaCode+"</td></tr>";
    			}*/
    			for(var k in data){
    				str += "<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
    			}
    			$("#nr").html(str);
    		}
    	})
    }
    function loadPageList(){
    	var str = "";
    	//加载上一页
    	str += "<li><a id='prev'>«</a></li>";
    	//加载列表
    	//向左找两个
    	for(var i=page;i>=page-1;i--){
    		var p = i-1;
    		if(p>0){
    			str += "<li><a class='plist'>"+p+"</a></li>";
    		}
    	}
    	//当前页
    	str += "<li class='disabled'><a>"+page+"</a></li>";
    	//向右找两个
    	for(var i=page;i<=page+1;i++){
    		var p = i+1;
    		var zys = yeShu();
    		if(p<=zys){
    			str += "<li><a class='plist'>"+p+"</a></li>";
    		}
    	}
    

     实现效果如图

     loadpagelist实现分页,然后给分页的class加点击事件

    function jiaShiJian(){
    	$("#prev").click(function(){
    		if(page>1){
    			page--;
    			loadData();
    			loadPageList();
    		}else{
    			alert("当前已经是第一页了!");
    		}
    		
    	})
    	$("#next").click(function(){
    		var zye = yeShu();
    		if(page<=zye){
    			page++;
    			loadData();
    			loadPageList();
    		}else{
    			alert("当前已经是最后一页了!");
    		}
    		
    	})
    	$(".plist").click(function(){
    		 page = parseInt($(this).text());//全局变量
    		loadData();
    		loadPageList();
    	})
    }
    

     做一个页数的方法

    function yeShu(){
    	var name = $("#name").val();
    	var ts = 0;
    	$.ajax({
    		async:false,
    		url:"yeshu.php",
    		data:{name:name},
    		type:"POST",
    		dataType:"TEXT",
    		success: function(data){
    			ts = data;
    		}
    		
    	})
    	var zye = Math.ceil(ts/pcount);
    	return zye;
    }
    

      

  • 相关阅读:
    OSGI简介
    公司僵尸帐号引发了一系列的入侵事件-细说密码强度验证的重要性
    为其他对象提供一种代理以控制对这个对象的访问-代理模式
    运用共享技术有效地支持大量细粒度的对象-享元模式
    移动APP为什么要开发两套Android和IOS-桥接模式
    非法疫苗引发的思考 -外观模式
    你们还记得张江男、张江女两张图片吗?-装饰模式
    一个程序员的蜕变(我是如何成为架构师的)
    公司新加了一台友宝自动售货机引发的思考-适配器模式
    程序员如何应对北上广高房价示例解说-建造者模式
  • 原文地址:https://www.cnblogs.com/forqiwen/p/8891296.html
Copyright © 2020-2023  润新知