zoukankan      html  css  js  c++  java
  • 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;
    }
    

      

  • 相关阅读:
    elasticsearch安装ik分词器
    原来你是这样的JAVA[03]-继承、多态、抽象类
    JAVA入门[23]-SpringBoot配置Swagger2
    原来你是这样的JAVA[01]-基础一瞥
    springboot + @scheduled 多任务并发
    chrome解决http自动跳转https问题
    jquery.uploadify+spring mvc实现上传图片
    JAVA POI导出excel
    使用ztree展示树形菜单结构
    shiro入门示例
  • 原文地址:https://www.cnblogs.com/forqiwen/p/8891296.html
Copyright © 2011-2022 走看看