此例子为参加 Datatables中文网第一期交流学习活动 网友 Amazing Grace 提供的Demo
演示了把Datatables表格变成一个可以实时编辑的效果,没有使用额外的插件,本站另一个 行内编辑的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | $( 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(); }); }); |
1 2 3 | < button type = "button" id = "batch-edit-btn" >批量编辑</ button > < button type = "button" id = "batch-save-btn" >批量保存</ button > < table id = "table" class = "display" width = "100%" ></ table > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?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 ); ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?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 ); ?> |