创设完美的表DataTable和Jeditable的jQuery插件

创建完美的表DataTable和Jeditable的jQuery插件

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

?

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

  ?

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

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

    ?

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

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

    12345678910111213141516171819202122232425262728293031323334<表类=?“表”?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代码。

    123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<脚本类型=?“文/ 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的插件编辑类。

    1234567891011121314$?（“编辑”?，?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