jQueryデータ型の検索オプション

私のサイトではjQueryデータテーブルを使用しています。私はデータセットに "マルチタブ"機能と "Ajaxコンテンツロード"機能を統合しました。今、データテーブルに検索オプションを統合したいと思います。私のコーディングは：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>

DataTableのプラグインをダウンロードすると、より多くの例を見て、私の知る限りはそれを得るようhttp://datatables.net/

出典

2011-12-26 11:18:14 Hearaman

[OK]を訪問...役立ちます。フィルタオプションは、 "検索"、すなわち

$(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データ型の検索オプション

答えて

関連する問題