创建完美的表DataTable和Jeditable的jQuery插件_PHP_编程开发_程序员俱乐部

毫无疑问，我们都爱jQuery的。创建简单的表是2006年如此。在本教程中我将告诉你如何使用数据表和Jeditable?jQuery插件创建简单的真棒表。让我们先检查出的特点。

?

• 与分页飞表
• 排序和搜索数据
• 编辑表格内的数据的能力
• 保存在cookie中的表状态

?

注：我总是试 ??图用我的代码实现以下。

• 易于理解
• 代码注释
• 正确格式化

?

这里有两个最重要的演示或下载链接。

首先，我们会先看看我们的表结构看起来像这样，它是按要求的DataTable插件。表中的数据可以从数据库中来，或可以手动feeded的。看看下面的HTML代码。

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 <表类=class="Apple-converted-space">?“表”?ID?=?“名人”?> ????????????<THEAD> ????????????????<TR> ????????????????????<TH>?ID?</次> ????????????????????<TH>?名称</ TH> ????????????????????<TH>?弹头</ TH> ????????????????????<TH>?更新</ TH> ????????????????????<TH>?</ TH> ????????????????</ TR> ????????????</ THEAD> ????????????<TBODY> ????????????????名词<?=?“1”?> ????????????????????TD?类=?“隐藏手机”?>?</ TD> ????????????????????TD?类=?“编辑”?>?林赛罗翰</ TD> ????????????????????TD?类=?“编辑隐藏手机”?>?lindsay_lohan?</ TD> ????????????????????<TD?类=?“隐藏手机”?>?2013-08-29T11：49:32 +02:00?</ TD> ????????????????????<TD>?<A?HREF?=?“JavaScript的：”?ID?=?“删除1”?=?“删除无下划线”?>?所述</ A>?</ TD> ????????????????</ TR> ????????????????<TR?ID?=?“2”?> ????????????????????TD?类=?“隐藏手机”?>?</ TD> ????????????????????<TD?类=?“编辑”?>?希拉里·达芙</ TD> ????????????????????TD?类=?“编辑隐藏手机”?>?hilary_duff?</ TD> ????????????????????<TD?类=?“隐藏手机”?>?2013-08-29T11：49:16 +02:00?</ TD> ????????????????????<TD>?<A?HREF?=?“JavaScript的：”?ID?=?“删除”?类=?“删除无下划线”?>?所述</ A>?</ TD> ????????????????</ TR> ????????????????<TR?=?“3”?> ????????????????????TD?类=?“隐藏手机”?>?</ TD> ????????????????????TD?类=?“编辑”?>?奥利维亚芒恩</ TD> ????????????????????<TD?一流=?“编辑隐藏手机”?>?olivia_munn?</ TD> ????????????????????<TD?类=?“隐藏手机”?>?2013-08-28T23：53:00 +02:00?</ TD> ????????????????????<TD>?<A?HREF?=?“JavaScript的：”?ID?=?“删除”?类=?“删除无下划线”?>?所述</ A>?</ TD> ????????????????</ TR> ???????????????????????</ TBODY> ????????</ TABLE>

这是必要的，指定<THEAD> </ THEAD和<TBODY> </ TBODY>标签THEAD表格标题和TBODY表体，这是我们的内容。?我已经给每个TR自己的ID时需要AJAX请求，让我们知道哪些内容需要更新或删除。让我们来看看下面的jQuery代码。

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 <脚本类型=?“文/ JavaScript的”?SRC?=?“JS / jquery.datatables.js的”?>?</ SCRIPT> <脚本类型=?“文/ JavaScript的”?SRC?=?“JS / jquery.jeditable.js”?>?</ SCRIPT> <脚本类型=?“文/ JavaScript的”?SRC?=?“JS / jquery.blockui.js的”?>?</ SCRIPT> <脚本类型=?“文/ JavaScript的”?> $?（文件）。就绪（函数（）?{ ????表?=?$?（“＃名人”?）; ????VAR?oTable?=?表。的dataTable?（{?“sPaginationType”?“full_numbers”?，?“bStateSave”?：?真正的}?）;在 ? ????$?（“编辑”?，?oTable?fnGetNodes?（））编辑（“PHP / ajax.php？R = edit_celeb”?，?{ ????????“回调”?：?功能（sValue???）?{ ????????????var目录?取?=?sValue?分割（“，”?）; ????????????VAR?APOS?=?oTable?fnGetPosition中; ????????????oTable?fnUpdate?取[?1?]?，?APOS?[?0?]?，?APOS?[?1?]?）; ????????} ????????的“submitdata”?功能（值?设置）?{ ????????????返回?{ ????????????????的“ROW_ID”?：?parentNode?的getAttribute?（“ID” ）， ????????????????“塔”?：?oTable?fnGetPosition?（当前）[?2?] ????????????}?; ????????} ????????“高度”?：?“14px的” ????}?）; ? ????$?（文件）上（“咔嚓”?，?“删除”?，?函数（）?{ ????????VAR?celeb_id?=?ATTR?（“ID” ）。替换（“删除”?，?“”?）; ????????父?=?$?（“＃”?+?celeb_id?）; ????????$?阿贾克斯（{ ????????????类型：?“得到”?， ????????????网址：?“PHP / ajax.php？R = delete_celeb＆ID =”?+?celeb_id ????????????包括：?“ ????????????beforeSend：?函数（）?{ ????????????????表块（{ ????????????????????消息：?“ ????????????????????CSS：?{ ????????????????????????边框：?“没有”?， ????????????????????????背景颜色：?“没有” ????????????????????} ????????????????????overlayCSS：?{ ????????????????????????背景颜色：?＃FFF“?， ????????????????????????不透明度： ????????????????????????光标：?“等待” ????????????????????} ????????????????}?）; ????????????} ????????????成功：?函数（响应）?{ ????????????????表疏通（）; ????????????????var目录?=?响应。分割（“，”?）; ????????????????（[?0?]?==?“成功”?）?{ ????????????????????$?（母公司）淡出（200?，（）?{ ????????????????????????元（母公司）。删除（）; ????????????????????}?）; ????????????????} ????????????} ????????}?）; ????}?）; }?）; </ SCRIPT>

初始化表[ID =“名人”]的DataTable插件后，我们在上面的js代码，然后移动到增加的内嵌编辑功能表安装jeditable插件。我已经加入编辑类编辑需要的表上的所有TD元素。下面的代码提取重视jeditable的插件编辑类。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $?（“编辑”?，?oTable?fnGetNodes?（））编辑（“PHP / ajax.php？R = edit_celeb”?，?{ ????????“回调”?：?功能（sValue???）?{ ????????????var目录?取?=?sValue?分割（“，”?）; ????????????VAR?APOS?=?oTable?fnGetPosition中; ????????????oTable?fnUpdate?取[?1?]?，?APOS?[?0?]?，?APOS?[?1?]?）; ????????} ????????的“submitdata”?功能（值?设置）?{ ????????????返回?{ ????????????????的“ROW_ID”?：?parentNode?的getAttribute?（“ID” ）， ????????????????“塔”?：?oTable?fnGetPosition?（当前）[?2?] ????????????}?; ????????} ????????“高度”?：?“14px的” ????}?）;

此代码将使我们能够得到内联编辑功能表。将修改后的文本作为一个AJAX请求在代码中指定的文件。“ajax.php”文件，在我们的例子中。此请求将包含修改后的文本，行ID（记住，在开始我们谈到这个），和列数（所以我们知道哪些数据需要进行编辑）。

我不打算在这里，因为我们没有做任何事情，在该文件中触摸ajax.php代码。在一个理想的情况下，我们将执行SQL查询，在该文件中，并把结果返回给页面。

所以，这是所有与jQuery的一部分。我建议你??退房的演示完全并尝试了所有的功能，看看如何提高表比平常。大家有一个锻炼。我特意离开了原因不明的代码的一部分。你能找出哪一部分是吗？我在等待着你的回应意见。

本文来自李新的博客，转载请注明出处。http://www.ilixin.net/399.html