分页显视

Posted 2020-09-22 <一>

  CSS 样式

#fen{  position:absolute; float:left; margin-left:190px; bottom:7px;;}
input{ margin:0px;}
.list,.dangqian{ font-size:13px;  display:block; width:35px; height:35px; text-align:center; vertical-align:middle; line-height:35px; float:left; border:1px solid #9DFFFF; margin:1px;}
#prev,#next{   text-align:center; vertical-align:middle; line-height:35px; float:left;  margin:1px; font-size:18px;}
.list:hover{ cursor:pointer}
#prev:hover{ cursor:pointer}
#next:hover{ cursor:pointer}
.dangqian{ background-color:#bce8f1; color:#0C0;}
#name{font-size:16px;}
#hywz{ color:#46b8da; font-size:14px;}

 

     <table class="table table-striped">
                  <thead>
                    <tr>
                      <th style="text-align:center;">发件人</th>
                      <th style="text-align:center;">主题</th>
                      <th style="text-align:center;">时间</th>
                      <th style="text-align:center;">操作</th>
                    </tr>
                  </thead>
                  <tbody id="nlck">
              
                  </tbody>
                </table>
				<div id="fen">
                	<!--<ul class="pagination " id="fen">

					</ul>-->
                </div>

 <script>代码

<script>
//fenyexianshi
var page = 1;
var num = 11;

shuju();

FenYe();
function shuju()
{
	$.ajax({
		url:"fychuli.php",
		data:{page:page,num:num},
		type:"POST",
		dataType:"JSON",
		success: function(data){
			var str = "";
			/*var shan="<a href=‘Xxcksh_cl.php?id={"+data[k].id+"}‘><button class=‘btn btn-danger‘ >删除</button></a>";*/
		for(var k in data)
			{
		str = str + "<tr><td>"+data[k].fa+"</td><td>"+data[k].biaoti+"</td><td>"+data[k].time+"</td><td style=‘padding:0px;line-height:36px;‘><button class=‘btn btn-success‘ data-toggle=‘modal‘ data-target=‘#myModal‘ onclick=‘chakan("+data[k].id+")‘>查看</button><a href=‘Xxcksh_cl.php?id="+data[k].id+"‘><button class=‘btn btn-danger‘ >删除</button></a></td></tr>";
			}
			$("#nlck").html(str);
		}	
	});
}
function FenYe()
{
	
	var s = "";

	s = "<span id=‘prev‘><<</span>";

	var zts = 0;
	$.ajax({
		async:false,
		url:"ztshu.php",
		dataType:"TEXT",
		success: function(data){
			zts = data;
		}

	});
	
	
	var zys = Math.ceil(zts/num);
	
	page = parseInt(page);
	for( var i=page-2;i<page+3;i++)
	{
		if(i>0 && i<=zys)
		{
			if(i==page)
			{
				s = s+"<span ys=‘"+i+"‘ class=‘dangqian‘>"+i+"</span>";
			}
			else
			{
				s = s+"<span ys=‘"+i+"‘ class=‘list‘>"+i+"</span>";
			}
			
		}
	}
	
	
	s = s+"<span id=‘next‘>>></span>";
	
	$("#fen").html(s);
	
	
	$("#prev").click(function(){
		page = parseInt(page);
		if(page>1)
		{page--;}
		
		shuju();
		
		FenYe();
	})
	
	$("#next").click(function(){
		page = parseInt(page);
		if(page<zys)
		{page++;}
		
		
		shuju();
		
		FenYe();
	})
	
	
	$(".list").click(function(){
		page = parseInt($(this).attr("ys"));
	
		shuju();
		
		FenYe();
	})
}

</script>

 PHP处理页面

<?php
require "../class/XiangMu.class.php";
$db = new xiangmu();
$sql = "select count(*) from tongxin";// 查询总数据总条数
echo $db->strquery($sql);

 

<?php
$page = $_POST["page"];
$num = $_POST["num"];
require "../class/XiangMu.class.php";
$db = new xiangmu();
$tguo = ($page-1)*$num;
$sql = "select * from tongxin limit {$tguo},{$num}";
echo $db->jsonquery($sql);