此例子为参加 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); ?>