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