创建完美的表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