行内编辑 不使用插件实现(php)

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