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

一.使用jquery.datatables.js

时间:2014-08-12 16:52:34      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   io   数据   for   

2014810日星期日

使用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);

}

 

 

 

一.使用jquery.datatables.js,布布扣,bubuko.com

一.使用jquery.datatables.js

标签:style   blog   http   color   使用   io   数据   for   

原文地址:http://www.cnblogs.com/ada-zheng/p/3907501.html

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