由于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