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

毫无疑问，我们都爱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

<表类= “表” 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