此例子为参加 Datatables中文网第一期交流学习活动 网友 Amazing Grace 提供的Demo
演示了把Datatables表格变成一个可以实时编辑的效果,没有使用额外的插件,本站另一个 行内编辑的例子
$(function(){
var table = $('#table').DataTable({
"ajax": {
"url": "/example/resources/user_share/inline_edit_no_plugin/data.php",
//"dataSrc": "data",//默认为data
"type": "post",
"error":function(){alert("服务器未正常响应,请重试");}
},
"columns": [
{ "data": "id", "title":"序号","defaultContent":""},
{ "data": "username", "title":"用户名","defaultContent":""},
{ "data": "name", "title":"姓名","defaultContent":""},
{ "data": "phone", "title":"电话","defaultContent":""},
{ "data": null, "title":"操作","defaultContent": "<button class='edit-btn' type='button'>编辑</button>"}
],
"language": {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
$("#table tbody").on("click",".edit-btn",function(){
var tds=$(this).parents("tr").children();
$.each(tds, function(i,val){
var jqob=$(val);
if(i < 1 || jqob.has('button').length ){return true;}//跳过第1项 序号,按钮
var txt=jqob.text();
var put=$("<input type='text'>");
put.val(txt);
jqob.html(put);
});
$(this).html("保存");
$(this).toggleClass("edit-btn");
$(this).toggleClass("save-btn");
});
$("#table tbody").on("click",".save-btn",function(){
var row=table.row($(this).parents("tr"));
var tds=$(this).parents("tr").children();
$.each(tds, function(i,val){
var jqob=$(val);
//把input变为字符串
if(!jqob.has('button').length){
var txt=jqob.children("input").val();
jqob.html(txt);
table.cell(jqob).data(txt);//修改DataTables对象的数据
}
});
var data=row.data();
$.ajax({
"url":"/example/resources/user_share/inline_edit_no_plugin/edit.php",
"data":data,
"type":"post",
"error":function(){
alert("服务器未正常响应,请重试");
},
"success":function(response){
alert(response);
}
});
$(this).html("编辑");
$(this).toggleClass("edit-btn");
$(this).toggleClass("save-btn");
});
//批量点击编辑按钮
$("#batch-edit-btn").click(function(){
$(".edit-btn").click();
});
$("#batch-save-btn").click(function(){
$(".save-btn").click();
});
});
<button type="button" id="batch-edit-btn">批量编辑</button>
<button type="button" id="batch-save-btn">批量保存</button>
<table id="table" class="display" width="100%"></table>
<?php
/**
*数据
*/
$con = mysql_connect("localhost", "root", "");
mysql_select_db("test", $con);
if (!$con) {
//数据库连接则失败显示demo数据
die('{"data":[{"id":"1","username":"demo",
"name":"\u59d3\u540d","phone":"13882500000"},
{"id":"2","username":"user","name":"\u540d\u5b57",
"phone":"0731-8888888"}]}');
}
$result = mysql_query("SELECT id,username,name,phone FROM user");
$data = array();
while ($row = mysql_fetch_array($result)) {
array_push($data, $row);
}
$json['data'] = $data;
echo json_encode($json);
mysql_close($con);
?>
<?php
/**
*编辑
*/
$con = mysql_connect("localhost", "root", "");
mysql_select_db("test", $con);
if( !$con ){
die('数据库连接失败');
}
$id = $_POST['id'];
$username = $_POST['username'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$result=mysql_query("UPDATE user SET username = '".$username."',name = '".$name."',phone = '".$phone."' WHERE id = ".$id);
if($result){
echo "修改成功";
}else{
echo "修改失败";
}
mysql_close($con);
?>