jquery tmpl

最新推荐文章于 2018-11-23 17:44:45 发布

奋斗土豆

最新推荐文章于 2018-11-23 17:44:45 发布

阅读量354

点赞数

分类专栏： javascript jquery

本文链接：https://blog.csdn.net/wojiaolijin/article/details/8520244

版权

jquery 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

jquery tmpl 确实挺好的。方便数据的展示。上代码。。。

//服务器端

<?php
mysql_connect("localhost", "root", "");
mysql_select_db("user");
if ($_GET['type'] == 'count') {
   $sql = "select count(*) num from user";
   $count = mysql_fetch_assoc(mysql_query($sql));
   echo ceil($count['num']/5);
} else {
   $page=$_GET['page']?$_GET['page']:0;
   $sql = "select * from user limit $page, 5";
   $query = mysql_query($sql);
   while ($res = mysql_fetch_assoc($query)) {
       $outs[] = $res;
   }
   echo json_encode($outs);
}
//html

//============================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>data list</title>
<style type="text/css">
tr td{ border-bottom:#CCCCCC 1px solid; border-left:#CCCCCC 1px solid}
table{ border-right:#CCCCCC 1px solid; border-top:#CCCCCC 1px solid}
</style>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td> 编号</td>
    <td> 姓名</td>
    <td> 年龄</td>
    <td> 创建时间</td>
</tr>

</table>
<div id="pager" ></div>
<script type="text/x-jquery-tmp" id="list">
   <tr>
    <td> ${id}</td>
    <td> ${name}</td>
    <td> ${age}</td>
    <td> ${createtime}</td>
</tr>
</script>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.js"></script>
<script type="text/javascript" src="js/jquery.pager.js"></script>
<script type="text/javascript">

var npage=0;
$(document).ready(function(){
    function showdata(npage){

       $.getJSON("data.php",{page:npage},function(data,res){
        if($.trim(res)=='success'){
          //清出以前的
          $("table tr:not(:first)").remove();
          $("#list").tmpl(data).appendTo("table");
       }else{
          alert("request failed");
       }
       });
   }
   function pages(pages){
       PageClick = function(pageclickednumber) {
        $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick});
       showdata(pageclickednumber);
       $(".pages li:eq(0)").html('首页');
       }
       $("#pager").pager({ pagenumber: 1, pagecount:pages, buttonClickCallback: PageClick });
       $(".pages li").eq(0).html('首页');
       alert( $(".pages li").eq(0).html());
   }
   //分页
   $.get("data.php",{type:'count'},function(data){
      pages(data)
   });
   showdata(npage);

});

</script>

奋斗土豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery tmpl

jquery tmpl 确实挺好的。方便数据的展示。上代码。。。//服务器端mysql_connect("localhost", "root", "");mysql_select_db("user");if ($_GET['type'] == 'count') { $sql = "select count(*) num from user"; $coun
复制链接

扫一扫