三.jquery.datatables.js表格编辑与删除
1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html)
采用了另一个数据格式
2.后台php,取表格数据变为:
public function initable(){
$db = M('yanfa_project')->select();
// 取$db的长度
// $len =count($db);
$item=array();
// 循环将$db二维数组每一项的value取出放一个数组里
foreach ($db as &$value) {
array_push($item,array_values($value));
}
// array_push($item,array_values($db[0]),array_values($db[1]));
// echo json_encode($item); $data=[
"data"=>$item,
];
// 本地数据测试
// $data =[
// "data"=> [
// [
// "Michael Bruce",
// "Javascript Developer",
// "Singapore",
// "5384",
// "2011/06/27",
// "$183,000",
// "Javascript Developer",
// "Singapore",
// "5384",
// "2011/06/27",
// "$183,000"
// ],
// [
// "Donna Snider",
// "Customer Support",
// "New York",
// "4226",
// "2011/01/25",
// "$112,000",
// "Javascript Developer",
// "Singapore",
// "5384",
// "2011/06/27",
// "$183,000"
// ]
// ]
// ];
echo json_encode($data);
}
3.前台js代码
//表格初始化化
var tables=$('.dataTables-example').DataTable({
"processing": true,
// "serverSide": true,
"autoWidth":false,
"ajax":{
"url":"initable",
},
"columnDefs": [{
"targets": -2,//编辑
"data": null,
"defaultContent": "<button id='editrow' class='btn btn-primary' type='button'><i class='fa fa-edit'></i></button>"
},{
"targets": -1,//删除
"data": null,
"defaultContent": "<button id='delrow' class='btn btn-primary' type='button'><i class='fa fa-trash-o'></i></button>"
},
{
"targets": 0,//第一列隐藏
"visible": false,
"searchable": false
}
]
});
数据删除
// 数据删除
$('.dataTables-example tbody').on( 'click', 'button#delrow', function () {
var data = tables.row( $(this).parents('tr') ).data();
$.ajax({
url: 'deltable',
type: 'POST',
dataType: 'json',
data: {id: data[0]},
})
.done(function(data) {
if (data=="success") {
tables.ajax.reload();
};
})
.fail(function() {
alert("error");
});
});
数据编辑
// 数据编辑
$('.dataTables-example tbody').on( 'click', 'button#editrow', function () {
var data = tables.row( $(this).parents('tr') ).data();
var fields = $("#add-form").serializeArray();
jQuery.each( fields, function(i, field){
//jquery根据name属性查找
$(":input[name='"+field.name+"']").val(data[i]);
});
$(":input[name='mark']").val("edit");
$("#modal-form").modal("show");//弹出框show });
为了标记传入后台的是编辑还是删除,使用了<input name='mark' type="hidden" value="add">隐形input在form里。
后台php代码为:
public function addtable(){
$data = $_POST;
$mark=$data['mark'];
unset($data['mark']);
if ($mark=='add') {
if(M('yanfa_project')->add($data)){
$this->ajaxReturn("success");
}
}else{ if(M('yanfa_project')->where(array('id' =>$data['id']))->save($data)){
$this->ajaxReturn("success");
}
}
}
三.jquery.datatables.js表格编辑与删除的更多相关文章
- 二.jquery.datatables.js表格数据添加
1.后台php public function addtable(){ $data = $_POST; if(M('yanfa_project')->add($data)){ $this-> ...
- 一.jquery.datatables.js表格显示
2014年8月10日星期日 使用jquery.datatables.js取后台数据. 1.html代码 <table class="dataTables-example"&g ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- Jquery DataTables 获取表格数据及行数据
注意table变量是 1.jQuery DataTables 行号获取 $("#example tbody tr").on("click", function( ...
- JQuery Easyui/TopJUI表格基本的删除功能(删除当前行和多选删除)
需求:数据表格datagrid实现删除当前行和多选删除的功能. html <a href="javascript:void(0)" data-toggle="top ...
- JQuery插件之Jquery.datatables.js用法及api
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
- Jquery.Datatables dom表格定位
Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...
- Jquery.Datatables dom表格定位 (转)
Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...
- Jquery DataTables 获取表格数据
1.获取表格所有数据 function getTableContent(){ var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行,nTrs[i]表示第i ...
随机推荐
- 常用的js 总结
1.点击一个按钮,跳转到新页面 $("#btnCancel").click(function(){ location.href="${ctx}/engine/formul ...
- 令人惊叹的HTML5动画及源码分析下载
HTML5非常酷,利用HTML5制作动画简直让我们忘记了这世界上还有flash的存在.今天我们要分享的一些HTML5动画都还不错,有些动画设计还是挺别出心裁的.另外,每一款HTML5动画都提供源代码下 ...
- PCL(Point Cloud Library)的第三方库简单介绍(boost,eigen,flann,vtk,qhull)
PCL由于融合了大量的第三方开源库,导致学习成本升高~在学习之前我们最好还是了解一下这些库都是干嘛的,以便有的放矢.在之后更好的使用 boost: C++的标准库的备用版,擅长从数学库到智能指针,从模 ...
- 基于原生PHP交叉会员权限控制
对于一个网站的后台管理系统,单一的超级管理员权限往往不能满足我们的需求,尤其是对于大型网站而言,这种单一的权限会引发许许多多的问题出现. 比如:一个网站编辑,平时他只是负责公司网站的公告更新,但如果网 ...
- PHP上传原理及操作实现
关于PHP上传文件的函数类库,网上有许多封装很完善,大家直接拿来用就可以. 本文章只是说下关于上传原理和简单的上传操作,老鸟就无视了哈^_^~ 还有一些安全性判断比如:服务端限制能接收图片类型的文件, ...
- koa项目用mongoose与mongodb交互,始终报错FormModel is not defined
koa项目用mongoose与mongodb交互,始终报错FormModel is not defined,就是自己定义的model实例始终不能找到,但是明明定义了,这时候就要看大小写了,当创建一个m ...
- 对事件委托绑定click的事件的解绑
大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, ...
- iOS app开发入门
https://github.com/qinjx/30min_guides/blob/master/ios.md
- java的final关键字——修饰变量
final修饰的变量不可变,指的是引用不可变,(除基本类型)而不是内容. final修饰的成员变量必须被初始化
- Java8比较器,如何对 List 排序
首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 Java 8新特性终极指南 2014/06/20 | 分类: 基础技术 | 3 条评论 | 标签: java8 分享到 ...