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

}

一.jquery.datatables.js表格显示的更多相关文章

  1. 三.jquery.datatables.js表格编辑与删除

    1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...

  2. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...

  3. 二.jquery.datatables.js表格数据添加

    1.后台php public function addtable(){ $data = $_POST; if(M('yanfa_project')->add($data)){ $this-> ...

  4. jquery.datatable.js与CI整合 异步加载(大数据量处理)

    http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...

  5. Jquery DataTables相关示例

    一.Jquery-DataTables DataTables 是jquery的一个开源的插件.它具有高度灵活的特性,基于渐进增强的基础,可以为任何表格添加交互.它特性如下: 提供分页,搜索和多列排序: ...

  6. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  7. jQuery DataTables 插件使用笔记

    初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=&q ...

  8. jquery datatables api (转)

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  9. .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单

    我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...

随机推荐

  1. e792. 建立一个包括所有数据的SpinnerListModel

    By default, if the user is browsing the values in a SpinnerListModel, the iteration stops when eithe ...

  2. The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead [duplicate]

    From: http://stackoverflow.com/questions/13944956/the-mysql-extension-is-deprecated-and-will-be-remo ...

  3. 无向带权图的最小生成树算法——Prim及Kruskal算法思路

    边赋以权值的图称为网或带权图,带权图的生成树也是带权的,生成树T各边的权值总和称为该树的权. 最小生成树(MST):权值最小的生成树. 生成树和最小生成树的应用:要连通n个城市需要n-1条边线路.可以 ...

  4. NFS介绍 NFS服务端安装配置 NFS配置选项

    NFS 介绍 • NFS是Network File System的缩写 • NFS最早由Sun公司开发,分2,,4三个版本,2和3由Sun起草开发,.0开始Netapp公司参与并主导开发,最新为4.1 ...

  5. 系统目录结构/ls命令/文件类型/alias命令

    2.1/2.2 系统目录结构 2.3 ls命令 2.4 文件类型 2.5 alias命令 linux文件目录结构 linux文件结构 / 系统跟目录 root  root用户主目录,存放启动linux ...

  6. linux mount 挂接新硬盘

    1.先用fdisk -l查看一下,先加入的外设地址名称   2. #fdisk /dev/sdb进入fdisk模式:Command (m for help):p //查看新硬盘的分区Command ( ...

  7. ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js

    直接看代码: JS代码如下: <script type="text/javascript" language="javascript"> funct ...

  8. DEFINE_PER_CPU,如何实现“数组”

    引述自:http://www.unixresources.net/linux/clf/linuxK/archive/00/00/47/91/479165.html Kevin.Liu 的<调度器 ...

  9. 组合模式(Composite Pattern) ------------结构型模式

    组合模式使用面向对象的思想来实现树形结构的处理和构件,描述了如何将容器对象和叶子对象进行递归组合,实现简单,灵活性好. 组合模式(Composite Pattern):组合多个对象形成树形结构以表示具 ...

  10. 理解Node.js异步非阻塞I/O与传统线性阻塞IO的区别(转)

    阻塞I/O 程序执行过程中必然要进行很多I/O操作,读写文件.输入输出.请求响应等等.I/O操作时最费时的,至少相对于代码来说,在传统的编程模式中,举个例子,你要读一个文件,整个线程都暂停下来,等待文 ...