一.使用jquery.datatables.js

標籤：style   blog   http   color   使用   io   資料   for   

2014年8月10日星期日

使用jquery.datatables.js取後台資料。

1.html代碼

 

<table class="dataTables-example"><thead><tr><th>id</th><th>項目</th><th>內容</th><th>所屬公司</th><th>開始日期</th><th>結束日期</th><th>成員</th><th>需求分析</th><th>方案</th><th>狀態</th><th>操作人</th><th>備忘</th></tr></thead></table>

 

 

2.js代碼

 var tables=$(‘.dataTables-example‘).DataTable({            "processing": true,            // "serverSide": true,            "ajax":{                 "url":"initable",            },            "columns":[                        { "data": "id" },                        { "data": "project" },                        { "data": "content" },                        { "data": "company" },                        { "data": "stime" },                        { "data": "etime" },                        { "data": "staff" },                        { "data": "requirement" },                        { "data": "scheme" },                        { "data": "status" },                        { "data": "operator" },                        { "data": "note" },                    ]         });

 

serverSide屬性加入時會使search沒有辦法用。

具體參數可以查詢官網

 

3.$(‘#add-form‘).ajaxForm(function(data){

              if (data==‘success‘) {

                    alert(‘添加成功！‘);

                    tables.ajax.reload();

               $("#modal-form").modal("hide");

              else{

                   alert(‘添加失敗！‘);

              };

});

使用form的非同步上傳(jquery.form.js)，當取到後台傳回值success時。重新整理表格。

 

4.後台php代碼

 

function initable(){

     $db = M(‘yanfa_project‘)->select();

     $data=[

          "draw"=>1,

          "recordsTotal"=>10,

          "recordsFiltered"=> 2,

          "data"=>$db,

      ];

     echo json_encode($data);

}