django +jQuery Grid Plugin 實(shí)現(xiàn)表格前提自動(dòng)分頁， 排序

由于django 中文在前臺(tái)顯示亂碼，本文使用了 先在用django模板生成表格，再用jQuery Grid對(duì)表格 進(jìn)行處理。

<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" >

           <tbody>

<tr >

           <th>禮包ID</th>

<td >禮包名字</td>

<th >CDK剩余量</th>

           <th>禮包內(nèi)容</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: "詳細(xì)信息查詢(刷新請(qǐng)按F5)",

flexHeight: true,

flexWidth: true,

bottomVisible : true , 顯示表格底部，這樣才能 顯示出分頁

freezeCols: 5, 不允許列進(jìn)行 橫向拖動(dòng)，一共5列，所以設(shè)置為5

};

       newObj.dataModel = { data: obj.data, rPP: 25, paging: "local" }; 設(shè)置分頁信息

       newObj.colModel = obj.colModel;

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

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

});

</script>