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表格编辑与删除的更多相关文章

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

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

  2. 一.jquery.datatables.js表格显示

    2014年8月10日星期日 使用jquery.datatables.js取后台数据. 1.html代码 <table class="dataTables-example"&g ...

  3. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  4. Jquery DataTables 获取表格数据及行数据

    注意table变量是 1.jQuery DataTables 行号获取 $("#example tbody tr").on("click", function( ...

  5. JQuery Easyui/TopJUI表格基本的删除功能(删除当前行和多选删除)

    需求:数据表格datagrid实现删除当前行和多选删除的功能. html <a href="javascript:void(0)" data-toggle="top ...

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

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

  7. Jquery.Datatables dom表格定位

    Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...

  8. Jquery.Datatables dom表格定位 (转)

    Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...

  9. Jquery DataTables 获取表格数据

    1.获取表格所有数据 function getTableContent(){ var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行,nTrs[i]表示第i ...

随机推荐

  1. CI框架 -- 核心文件 之 Exceptions.php

    使用CI框架,我们通常使用一下三个函数处理错误: show_error('消息' [, int $status_code = 500 ] ) show_404('页面' [, 'log_error'] ...

  2. mothur reverse.seqs 将序列反向互补

    reverse.seqs 命令可以得到输入序列的反向互补序列 用法: mothur "#reverse.seqs(fasta = "input.fasta")" ...

  3. MyMVC配置

    <system.webServer> <validation validateIntegratedModeConfiguration="false"/> & ...

  4. PHP中全局变量的使用global和$GLOBALS[]

    From: http://blog.csdn.net/happyqyt/article/details/7219889 用PHP开发项目,不可避免的会使用到全局变量,比如一些网站的配置信息,全站通用, ...

  5. 前端Table数据导出Excel使用HSSFWorkbook(Java)

    一.实现原理: 1. 前端查询列表数据并渲染至table(<table>...</table>)表格 2. 表格html代码传输至后台 3. 后台把html转成Excel输出流 ...

  6. SharePoint 2013 处理Promoted Links类型的List下的Tiles View的默认Webpart展示方式

    问题: 为了去掉Photo Gallery的水平滚动效果,更改为根据内容进行自适应宽度多行显示效果 Promoter link --> photo gallery Not horizontal ...

  7. adb错误:Failed to execute android command 'adb devices'.

    好吧,我是用的phonegap3.0开发的,很简单,安装的时候一句phonegap run android –device就可以了(-device参数非必要,我是为了不跑模拟器,加上此参数限制只跑到设 ...

  8. geoserver 地图性能和缓存

    1.什么是GeoWebCache GeoWebCache是地图缓存软件公司成员开发的一个基于java的开源项目.和其他的缓存系统相似,它作为一个客户端和地图服务的代理.它可以单独部署,适用于任何基于W ...

  9. python怎么写可读性好的面向过程的长篇代码?

    最近接受老代码,mmp的,说是重新运行运行起来,那还不如重写呢,因为有很多毛病,不能直接运行,pep8就不用妄想奢望了,还有包括语法错误问题和内存严重泄露的问题(运行几分钟后python.exe进程达 ...

  10. MAC下Android的Eclipse开发环境的搭建 转自MacroCheng

    原文地址:  http://www.cnblogs.com/macro-cheng/archive/2011/09/30/android-001.html 一.Eclipse的下载 到网站:http: ...