jQuery數據表中的搜索選項

我在我的網站中使用jQuery數據表。我已將「多選項卡」功能和「Ajax Content loading」功能與數據表集成在一起。現在我想將搜索選項集成到我的數據表中。我的編碼是：jQuery數據表中的搜索選項

$(document).ready(function() { 
      $("#tabs").tabs({ // My datatable Div Id 
       "show": function(event, ui) { 
        var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable(); 
        if (oTable.length > 0) { 
         oTable.fnAdjustColumnSizing(); 
        } 
       } 
      }); 

      $('#example1').dataTable({  //example1->My first table Id 
       "bProcessing": true, 
       "sAjaxSource": "test_data.php", // "test_data.php" provides content for my first table 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 
      }); 

      $('#example2').dataTable({ // example2->My second table Id 
       "bProcessing": true, 
       "sAjaxSource": "test_data2.php",  // "test_data2.php" provides content for my second table 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 
      }); 
});

我在「示例數據表」中找到了解決搜索選項的方案。該編碼是：

var asInitVals = new Array(); 

     $(document).ready(function() { 
      var oTable = $('#example').dataTable({ 
       "oLanguage": { 
        "sSearch": "Search all columns:" 
       } 
      }); 

      $("tfoot input").keyup(function() { 
       /* Filter on the column (the index) of this element */ 
       oTable.fnFilter(this.value, $("tfoot input").index(this)); 
      }); 



      /* 
      * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
      * the footer 
      */ 
      $("tfoot input").each(function (i) { 
       asInitVals[i] = this.value; 
      }); 

      $("tfoot input").focus(function() { 
       if (this.className == "search_init") 
       { 
        this.className = ""; 
        this.value = ""; 
       } 
      }); 

      $("tfoot input").blur(function (i) { 
       if (this.value == "") 
       { 
        this.className = "search_init"; 
        this.value = asInitVals[$("tfoot input").index(this)]; 
       } 
      }); 

     });

請指導我將上面的解決方案集成到我的代碼中，否則請給出您的建議以整合搜索選項。

來源

2011-12-26 designersvsoft

此示例代碼可能會幫助你...

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
      <html> 
       <head> 
         <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

         <title>Working on Datatable</title> 

         <!-- Your JQuery Library --> 
         <script type="text/javascript" language="javascript" src="jquery-1.6.1.min.js"></script> 

         <!-- Your DataTable library --> 
         <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script> 
         <script type="text/javascript" charset="utf-8"> 
          $(document).ready(function() 
          { 
           $('#userlist').dataTable({ 
            "sDom": '<"toolbar">frtip' 
           }); 

          }); 
         </script> 
       </head> 
       <body> 
         <div class="box"> 
          <div style="width:100%;"> 
           <table cellpadding="0" cellspacing="0" id="userlist" width="100%" style="border: 1px solid #0000CC; margin-top:10px;margin-bottom:10px;"> 
            <thead> 
              <tr style=" background-color:#004677; font-size:14px; color:#fff; font-weight:bold;" height="30"> 
               <th>Slno</th> 
               <th>User ID</th> 
               <th>Name</th> 
               <th>Email</th> 
               <th>City</th> 
               <th>Contact Number</th> 
              </tr> 
            </thead> 
            <tbody> 
             <tr> 
              <td>1</td> 
              <td>0001</td> 
              <td>Hearaman</td> 
              <td>[email protected]</td> 
              <td>Bangalore,India</td> 
              <td>9740798429</td> 
             </tr> 

             <tr> 
              <td>2</td> 
              <td>0002</td> 
              <td>Raman</td> 
              <td>[email protected]</td> 
              <td>Hyderabad,India</td> 
              <td>886798429</td> 
             </tr> 

             <tr> 
              <td>3</td> 
              <td>0003</td> 
              <td>Satish Chandra</td> 
              <td>[email protected]</td> 
              <td>Bangalore,India</td> 
              <td>948209876</td> 
             </tr> 

             <tr> 
              <td>4</td> 
              <td>0004</td> 
              <td>satish</td> 
              <td>[email protected]</td> 
              <td>Bangalore,India</td> 
              <td>987639029</td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </div> 
       </body> 
      </html>

要下載數據表插件並看到更多的例子，請訪問：http://datatables.net/

來源

2011-12-26 11:18:14 Hearaman

好，據我得到它。添加過濾選項搜索即

$(document).ready(function() { 

     $('#example1').dataTable({  //example1->My first table Id 
      "bProcessing": true,

「搜索」：真實，

  "sAjaxSource": "test_data.php", // "test_data.php" provides content for my first table 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers" 
     }); 

     $('#example2').dataTable({ // example2->My second table Id 
      "bProcessing": true, 
      "searching": true, 
      "sAjaxSource": "test_data2.php",  // "test_data2.php" provides content for my second table 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers" 
     });

}）;

來源

2016-07-11 04:57:58 Gurria

jQuery數據表中的搜索選項

回答

相關問題