码迷,mamicode.com
首页 > Web开发 > 详细

django +jQuery Grid Plugin 实现表格前提自动分页, 排序

时间:2014-05-09 14:38:35      阅读:989      评论:0      收藏:0      [点我收藏+]

标签:django +jquery grid plugin 实现表格前提自动分页   排序   

由于django 中文在前台显示乱码,本文使用了 先在用django模板生成表格,再用jQuery Grid对表格 进行处理。

<link href="../pqgrid.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/pqgrid.min.js"></script>

<script type="text/javascript" src="../js/pq-localize-zh.js"></script>


<div id="grid_table"></div> 用来显示jQuery Grid表格


<table border="1" cellspacing="0" cellpadding="0" class="fortune500" style="margin:auto;" >

           <tbody>

<tr >

           <th>礼包ID</th>

<td >礼包名字</td>

<th >CDK剩余量</th>

           <th>礼包内容</th>

<td >生成日期</td>

         </tr>


       <tbody>

        {% for gift in gift_lists %} django生成的表格

        <tr>

<td >{{gift.gift_id}}</td>

<td >{{gift.gift_name}}</td>

<td >{{gift.gift_nums}}</td>

<td >{{gift.gift_content}}</td>

<td >{{gift.gift_time}}</td>

</tr>

{% endfor %}


           <!-- repeating rows end -->

       </tbody></table>

<script>

$(function () {

$("table.fortune500").css(‘min-height‘,(jQuery(‘#right‘).height()-200)+"px");

$("table.fortune500").css(‘min-width‘,jQuery(‘#right‘).width()+"px");

      var tbl = $("table.fortune500");

       var obj = $.paramquery.tableToArray(tbl);

       var newObj = {

width:jQuery(‘#right‘).width()+"px",

height:jQuery(‘#right‘).height()+"px",

title: "详细信息查询(刷新请按F5)",

flexHeight: true,

flexWidth: true,

bottomVisible : true , 显示表格底部,这样才能 显示出分页

freezeCols: 5, 不允许列进行 横向拖动,一共5列,所以设置为5

};

       newObj.dataModel = { data: obj.data, rPP: 25, paging: "local" }; 设置分页信息

       newObj.colModel = obj.colModel;

       $("#grid_table").pqGrid(newObj);

       tbl.css("display", "none");


});


</script>


本文出自 “python django jqurey” 博客,请务必保留此出处http://tomyu.blog.51cto.com/705648/1408779

django +jQuery Grid Plugin 实现表格前提自动分页, 排序,布布扣,bubuko.com

django +jQuery Grid Plugin 实现表格前提自动分页, 排序

标签:django +jquery grid plugin 实现表格前提自动分页   排序   

原文地址:http://tomyu.blog.51cto.com/705648/1408779

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!