動態生成數據表的過濾器

我再次問這個問題，因爲我找到任何適當的想法。我正在嘗試實現該功能以根據供應商名稱篩選項目。項目列根據供應商名稱。自從一週以來，我一直在這裏停留。嘗試了很多方法，但沒有工作。我的要求步驟如下。動態生成數據表的過濾器

我從數據庫中獲得所有供應商的名稱。
使用檢索到的供應商名稱作爲過濾名單:<option>vendorname</option>
我可以使用供應商代碼爲外鍵每個供應商的ITEM_CODE將有多個ITEM_CODE與每個供應商可能會超過500
現在我想以選擇任何供應商時的方式創建下拉列表，應該過濾來自表格的相應項目代碼。

任何建議或步驟將不勝感激。

我最後的努力：

$('#vendor').on('change',function(){ 

     var selectedValue = $(this).val(); 
     $("#testTable").dataTable().fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg 
    }); 

<div class="optionsDiv2" style="display:inline;" >  
    Vendor Name:<select name="item" id="vendor" style="width:510px;"> 
     <option value=" " selected>ALL</option> 
     <% try{ 
      String queryv = "SELECT VNAME, VCODE FROM S_VENDORS"; 
     Statement stmtv=conn.createStatement(); 
     ResultSet rsv=stmtv.executeQuery(queryv); 

     while (rsv.next()) { 
      VCD = rsv.getString("VCODE"); 
      String vcd="'"+VCD+"'"; 
     String queryi = "SELECT ICODE FROM VENDOR_ITEM_DETAILS Where VCODE="+vcd; 
     Statement stmti=conn.createStatement(); 
     ResultSet rsi=stmti.executeQuery(queryi); 
     try{ 
      i=0; 
     while (rsi.next()) 
      Array1[i++] = rsi.getString("ICODE").toString(); 
      join1 = String.join("|", Array1); 
     } 
     catch(Exception ex) 
     { 
     out.println(ex); 
     } 

     %> 

    <option value="<%= join1%>"><%= rsv.getString("VNAME")%></option> 

    <% Arrays.fill(Array1, null); } 
rsv.close(); 
stmtv.close(); 
} 
    catch(Exception ex) 
     { 
     out.println(ex); 
     } 

%> 
     </select> 
</div>

我加入這裏ID爲「礦」和下拉式ID 「Myselect」的DataTable工作小提琴：https://jsfiddle.net/Safoora/2j6w9hqt/18/。我正在嘗試爲我的上述代碼做同樣的事情。

任何新的建議，從一開始的發展也歡迎。

一箇中如下選項列表：

<option value="401 1|401 1.1/2|401 1.1/4|401 1/2|401 2|401 2.1/2|401 3|401 3/4|401 4|AD CAN|BB SS 3|BBH BU 2.1/2X1.1/2|BBH BU 2.1/2X2|BBH BU 3X1|BBH BU 3X1.1/2|BBH BU 3X2|BBH BU 3X2.1/2|BBH BU 4X2|BBH BU 4X3|BBH CP 2.1/2|BBH CR 3|BBH EL 45 3|BBH EL 45 4|BBH EL 90 2.1/2|BBH EL 90 3|BBH EL 90 4|BBH NI 2.1/2|BBH NI 3|BBH NI 4|BBH RS 2.1/2X1.1/2|BBH RS 2.1/2X2|BBH RS 3X2|BBH RT 2.1/2X1|BBH RT 2.1/2X1.1/2|BBH RT 2.1/2X2|BBH RT 3X1.1/2|BBH RT 3X2|BBH RT 4X2|BBH SO 2.1/2|BBH SO 3|BBH SO 4|BBH TE 2.1/2|BBH TE 3|BBH TE 4|BBH UN 2.1/2|BBH UN 3|BD 150 12|BD 150 3|BIB 1/2|BIB 3/4|BN BU 1.1/2X1|BN BU 1.1/2X1.1/4|BN BU 1.1/2X1/2|BN BU 1.1/4X1|BN BU 1.1/4X1/2|BN BU 1.1/4X3/4|BN BU 1X1/2|BN BU 1X3/4|BN BU 2.1/2X1.1/2|BN BU 2X1|BN BU 2X1.1/2|BN BU 2X1.1/4|BN BU 2X1/2|BN BU 2X3/4|BN BU 3/4X1/2|BN CR 1|BN CR 1.1/2|BN CR 1.1/4|BN CR 2|BN EL 45 1|BN EL 45 1.1/2|BN EL 45 1.1/4|BN EL 45 2|BN EL 45 3/4|BN EL 90 1|BN EL 90 1.1/2|BN EL 90 1.1/4|BN EL 90 1/2|BN EL 90 2|BN EL 90 3/4|BN NI 1|BN NI 1.1/2|BN NI 1.1/4|BN NI 1/2|BN NI 2|BN NI 3/4|BN PG 1|BN PG 1.1/2|BN PG 1.1/4|BN PG 1/2|BN PG 3/4|BN RL 1.1/2X1|BN RL 1.1/2X1.1/4|BN RL 1.1/4X1|BN RL 1.1/4X1/2|BN RL 1X1/2|BN RL 2X1.1/2|BN RS 1.1/2X1|BN RS 1.1/2X1.1/4|BN RS 1.1/2X1/2|BN RS 1.1/2X3/4|BN RS 1.1/4X1|BN RS 1.1/4X3/4|BN RS 1X1/2|BN RS 1X3/4|BN RS 2X1.1/2|BN RS 2X1.1/4|BN RS 3/4X1/2|BN RT 1.1/2X1|BN RT 1.1/2X1.1/4|BN RT 1.1/2X1/2|BN RT 1.1/2X3/4|BN RT 1.1/4X1|BN RT 1.1/4X1/2|BN RT 1.1/4X3/4|BN RT 1X1/2|BN RT 1X3/4|BN RT 2X1|BN RT 2X1.1/2|BN RT 2X1.1/4|BN RT 2X1/2|BN RT 2X3/4|BN SL 1|BN SL 1.1/2|BN SL 1.1/4|BN SL 1/2|BN SL 3/4|BN SO 1|BN SO 1.1/2|BN SO 1.1/4|BN SO 1/2|BN SO 2|BN SO 3/4|BN SOM 1/2|BN TE 1|BN TE 1.1/2|BN TE 1.1/4|BN TE 1/2|BN TE 2|BN TE 3/4|BN UN 1|BN UN 1.1/2|BN UN 1.1/4|BN UN 1/2|BN UN 2|BN UN 3/4|BPS40L 1|BR BL 1|BR BL 1.1/2|BR BL 1.1/4|BR BL 1/2|BR BL 2|BR BL 2.1/2|BR BL 3|BR BL 3/4|BR BL 4|BR FT 1|BR FT 1.1/2|BR FT 1.1/4|BR FT 2|BR FT 2.1/2|BR FT 3|BR FT 4|BR GT 2.1/2|BR HN 1/2|BRP GT 1.1/2|BRP GT 2|BRP GT 2.1/2|BRP GT 3|BRP GT 3/4|BRP GT 4|BSP40 1 N|BSP40 1.1/4 N|BSP40 3/4 N|BT|BWL CP 6|BWL CP 8|BWL EL 45 5|BWL EL 90 1|BWL EL 90 1.1/2|BWL EL 90 10|BWL EL 90 2|BWL EL 90 5|BWL RC 2X1.1/4|BWL RE 10X4|BWL RE 8X4|BWL RT 10X5|BWL RT 10X8|BWL RT 12X10|BWL RT 2.1/2X1.1/2|BWL RT 2.1/2X1.1/4|BWL RT 3X1|BWL RT 3X1.1/2|BWL RT 3X1.1/4|BWL RT 4X1.1/2|BWL RT 4X1.1/4|BWL RT 4X3|BWL RT 6X4|BWL RT 8X6|BWL TE 5|CB CP 3|CB CP 4|CB CP 6|CB EL 45 2.1/2|CB EL 45 3|CB EL 45 4|CB EL 45 6|CB EL 45 8|CB EL 90 10|CB EL 90 2.1/2|CB EL 90 3|CB EL 90 4|CB EL 90 5|CB EL 90 6|CB FL 2.1/2|CB FL 3|CB FL 4|CB FL 6|CB FL 8|CB MT 2.1/2X1|CB MT 2.1/2X1.1/2|CB MT 3X1|CB MT 3X1.1/2|CB MT 3X2|CB MT 4X1|CB MT 4X1.1/2|CB MT 4X1.1/4|CB MT 4X2|CB MT 4X2.1/2|CB MT 4X3|CB MT 6X1.1/2|CB MT 6X1.1/4|CB MT 6X2|CB MT 6X2.1/2|CB MT 6X3|CB RC 2.1/2X2|CB RC 2X1.1/2|CB RC 3X2|CB RC 3X2.1/2|CB RC 4X2|CB RC 4X2.1/2|CB RC 4X3|CB RC 6X3|CB RC 6X4|CB RS GS 2.1/2X2|CB RT 2.1/2X2|CB RT 3X1.1/2|CB RT 3X2|CB RT 3X2.1/2|CB RT 4X2|CB RT 4X3|CB RT 5X3|CB RT 6X2.1/2|CB RT 6X3|CB RT 6X4|CB SO 10|CB SO 12|CB SO 2|CB SO 2.1/2|CB SO 3|CB SO 4|CB SO 5|CB SO 6|CB SO 8|CB TE 2.1/2|CB TE 3|CB TE 4|CB TE 5|CB TE 6|CB TE 8|CU AD CF 1/2X3/8 CH|FN BU 1X1/2|FN BU 1X3/4|FN BU 3/4X1/2|FN EL 90 1|FN EL 90 1/2|FN EL 90 3/4|FN NI 1|FN NI 1/2|FN NI 3/4|FN SO 1|FN SO 1/2|FN SO 3/4|FN TE 1|FN TE 1/2|FN TE 3/4|FN UN 1|FN UN 1/2|FN UN 3/4|GAZ 1/2|GAZM 1/2|GB ST FL 2.1/2|GB ST FL 3|GB ST FL 4|GBH BU 2.1/2X1|GBH BU 2.1/2X1.1/2|GBH BU 2.1/2X2|GBH BU 3X2.1/2|GBH BU 4X1.1/2|GBH BU 4X2|GBH BU 4X3|GBH EL 45 3|GBH EL 45 4|GBH EL 90 2.1/2|GBH EL 90 3|GBH EL 90 4|GBH NI 2.1/2|GBH NI 3|GBH NI 4|GBH PG 3|GBH RT 2.1/2X2|GBH RT 3X1|GBH RT 3X1.1/2|GBH RT 3X2|GBH RT 4X2|GBH RT 4X3|GBH SO 2.1/2|GBH SO 3|GBH SO 4|GBH TE 2.1/2|GBH TE 4|GBH UN 2.1/2|GBH UN 3|GBH UN 4|GCB RC 3X1.1/2|GN BU 1.1/2X1|GN BU 1.1/2X1.1/4|GN BU 1.1/2X1/2|GN BU 1.1/2X3/4|GN BU 1.1/4X1|GN BU 1.1/4X1 R|GN BU 1X1/2|GN BU 1X3/4|GN BU 2X1|GN BU 2X1 R|GN BU 2X1.1/2|GN BU 2X1.1/2 R|GN BU 2X1.1/4|GN BU 2X1.1/4 R|GN BU 2X1/2|GN BU 2X3/4|GN BU 3/4X1/2|GN CP 1|GN CP 1.1/2|GN CP 1.1/4|GN CP 2|GN CR 2|GN EL 45 1|GN EL 45 1.1/2|GN EL 45 1.1/4|GN EL 45 2|GN EL 90 1|GN EL 90 1.1/2|GN EL 90 1.1/2 R|GN EL 90 1.1/4|GN EL 90 1/2|GN EL 90 2|GN EL 90 3/4|GN NI 1|GN NI 1.1/2|GN NI 1.1/4|GN NI 1/2|GN NI 2|GN NI 3/4|GN PG 1|GN PG 1.1/2|GN PG 1.1/4|GN PG 1/2|GN PG 2|GN PG 3/4|GN RL 1.1/4X1|GN RL 1X1/2|GN RL 2X1.1/2|GN RS 1.1/2X1|GN RS 1.1/2X1.1/4|GN RS 1.1/2X1/2|GN RS 1.1/4X1|GN RS 1X1/2|GN RS 1X3/4|GN RS 2X1|GN RS 2X1.1/2|GN RS 2X1.1/4|GN RT 1.1/2X1|GN RT 1.1/2X1.1/4|GN RT 1.1/2X1/2|GN RT 1.1/4X1|GN RT 1.1/4X1/2 R|GN RT 1X1/2|GN RT 2X1|GN RT 2X1.1/2|GN RT 2X1.1/2 R|GN RT 2X1.1/4|GN RT 2X1.1/4 R|GN RT 2X1/2|GN RT 2X3/4|GN RT 3X1|GN SL 1/2|GN SO 1|GN SO 1.1/2|GN SO 1.1/4|GN SO 1/2|GN SO 2|GN SO 3/4|GN SOM 1.1/2|GN SOM 1/2|GN TE 1|GN TE 1.1/2|GN TE 1.1/4|GN TE 1/2|GN TE 2|GN TE 3/4|GN UN 1|GN UN 1.1/2|GN UN 1.1/4|GN UN 2|GN UN 3/4|HEMP|HM WT 15 1/2 PPP|PERMATEX|PIPE|PTFE|PTFE 3|PTFE 6|SO 150 2|SO 150 2.1/2|SO 150 3|SO 150 4|SO 150 5|SO 150 6|SO 16 2|SO 16 2.1/2|SO 16 3|SO 16 4|SO 16 5|SPW40 2 316L|SS UN 1|SSO 16 3|SSO 16 4|TP IN|TP INR|WN 150 2|WN 150 3|WN 150 4|WN 150 5|WN 150 8|WN 16 4|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null|null">ABDULAZIZ A . ISMAIL EST</option>

來源

2016-11-08 techhunter

也許你可以更新您所做到目前爲止 – elfan

加我嘗試@elfan代碼你的問題。 – techhunter

你有沒有試過這個更簡單的例子？一個JavaScript頁面的HTML頁面？這是卡住的第一步，讓你的問題更簡單。在這裏，你給的例子並不簡單。嘗試提供[mcve]。你可能會發現創建它的解決方案PS：你應該避免使用scriplet，尤其是那種訪問數據庫的方法，這很麻煩。看看如何使用Servlet和JSTL – AxelH

$(this).val()指value屬性您<option>的含有ICODE，這是會被傳遞到。

例如，如果HTML輸出是這樣的：

<option value="CL 1/2|CL 3/4|CU EL 45 1.1">AL- KASER FOR A/C EST.</option>

如果它被選擇，與當前的代碼，所構造正則表達式。將^CL 1/2|CL 3/4|CU EL 45 1.1$，這意味着它將匹配表中的行，其中所述第一柱包含文本，如CL 1/2xxxx，xxxxxCL 3/4xxxx和xxxxxCU EL 45 1.1（注意額外的x字符）。它也會匹配xxxxxCU EL 45 1x1，因爲在正則表達式中，點字符可以匹配任何字符。

如果你想完全匹配CL 1/2，CL 3/4，並CU EL 45 1.1，那麼該模式需要與^和$之間括號()被封閉，所有的特殊字符的正則表達式必須轉義，即^(CL 1\/2|CL 3\/4|CU EL 45 1\.1)$。此外，doesn't recognize space so我們需要使用\s而不是文字空間。最終的正則表達式將是^(CL\s1\/2|CL\s3\/4|CU\sEL\s45 1\.1)$。

查看您當前的代碼（其中的第二個參數爲0，即第一列），我假設您將在第一列顯示ICODE，並在另一列顯示供應商名稱。見下圖。

替代解決方案＃1過濾基於ICODE

$(document).ready(function() { 
 
    var table = $('#mine').DataTable(); 
 

 
    $('#mySelect').on('change', function() { 
 
    var selectedValue = $(this).val(); 
 
    var patt = selectedValue.replace(/[\[\]\/\{\}\(\)\*\+\?\.\\\^\$-]/g, "\\$&"); \t //escape regex chars except "|" 
 
    patt = patt.replace(/ /g, "\\\s"); //change space to "\s" to make fnFilter works 
 
    if (patt) patt = "^(" + patt + ")$"; //enclose with parentheses only when pattern is not empty 
 

 
    console.log(patt); 
 

 
    $("#mine").dataTable().fnFilter(patt, 0, true); //Exact value, column, reg 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 

 
<select id="mySelect"> 
 
    <option value="">All</option>          <!--  --> 
 
    <option value="CL 1/2|CU EL 45 1.1">AL- KASER FOR A/C EST.</option> <!-- ^(CL\s1\/2|CU\sEL\s45\s1\.1)$ --> 
 
    <option value="BOLT 3/4X4|CH 1.1/2">AL-ALWANI TRADING C0</option> <!-- ^(BOLT\s3\/4X4|CH\s1\.1\/2)$ --> 
 
</select> 
 

 

 
<table id="mine" border="1" cellpadding="1" cellspacing="0"> 
 
    <thead> 
 
    <tr>       <!-- header row --> 
 
     <th>ICODE</th>     <!-- column index 0 --> 
 
     <th>VENDOR</th>     <!-- column index 1 --> 
 
     <th>DESC</th>      <!-- column index 2 --> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 

 
    </tfoot> 
 
    <tbody> 
 
    <tr>       <!-- 1st row --> 
 
     <td>CL 1/2</td>     <!-- column index 0 --> 
 
     <td>AL- KASER FOR A/C EST.</td> <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    <tr>       <!-- 2nd row --> 
 
     <td>CU EL 45 1.1</td>    <!-- column index 0 --> 
 
     <td>AL- KASER FOR A/C EST.</td> <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    <tr>       <!-- 3rd row --> 
 
     <td>BOLT 3/4X4</td>    <!-- column index 0 --> 
 
     <td>AL-ALWANI TRADING C0</td>  <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    <tr>       <!-- 4th row --> 
 
     <td>CH 1.1/2</td>     <!-- column index 0 --> 
 
     <td>AL-ALWANI TRADING C0</td>  <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    </tbody> 
 
</table>

重要，你不應該有空在你的ICODE（如您顯示在聊天對話中在下面的評論中）。如果您有多個選項值爲null，那麼如果選擇了這些選項中的任何一個，則會顯示ICODE等於null的所有行。如果null是不可避免的，下面的第二個替代方案可能會更好地達到相同的結果。

替代解決方案＃2濾波基於供應商名稱

代碼幾乎是相同的。唯一的區別是我們使用供應商名稱作爲<option>的值。因此，fnFilter()的第二個參數更改爲1（它是指顯示供應商名稱的第二列）。

$(document).ready(function() { 
 
    var table = $('#mine').DataTable(); 
 

 
    $('#mySelect').on('change', function() { 
 
    var selectedValue = $(this).val(); 
 
    var patt = selectedValue.replace(/[\[\]\/\{\}\(\)\*\+\?\.\\\^\$-]/g, "\\$&"); \t //escape regex chars except "|" 
 
    patt = patt.replace(/ /g, "\\\s"); //change space to "\s" to make fnFilter works 
 
    if (patt) patt = "^(" + patt + ")$"; //enclose with parentheses only when pattern is not empty 
 

 
    console.log(patt); 
 

 
    $("#mine").dataTable().fnFilter(patt, 1, true); //Exact value, column, reg 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 

 
<select id="mySelect"> 
 
    <option value="">All</option>           <!--  --> 
 
    <option value="AL- KASER FOR A/C EST.">AL- KASER FOR A/C EST.</option> <!-- ^(AL\-\sKASER\sFOR\sA\/C\sEST\.)$ --> 
 
    <option value="AL-ALWANI TRADING C0">AL-ALWANI TRADING C0</option>  <!-- ^(AL\-ALWANI\sTRADING\sC0)$ --> 
 
</select> 
 

 

 
<table id="mine" border="1" cellpadding="1" cellspacing="0"> 
 
    <thead> 
 
    <tr>       <!-- header row --> 
 
     <th>ICODE</th>     <!-- column index 0 --> 
 
     <th>VENDOR</th>     <!-- column index 1 --> 
 
     <th>DESC</th>      <!-- column index 2 --> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 

 
    </tfoot> 
 
    <tbody> 
 
    <tr>       <!-- 1st row --> 
 
     <td>CL 1/2</td>     <!-- column index 0 --> 
 
     <td>AL- KASER FOR A/C EST.</td> <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    <tr>       <!-- 2nd row --> 
 
     <td>CU EL 45 1.1</td>    <!-- column index 0 --> 
 
     <td>AL- KASER FOR A/C EST.</td> <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    <tr>       <!-- 3rd row --> 
 
     <td>BOLT 3/4X4</td>    <!-- column index 0 --> 
 
     <td>AL-ALWANI TRADING C0</td>  <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    <tr>       <!-- 4th row --> 
 
     <td>CH 1.1/2</td>     <!-- column index 0 --> 
 
     <td>AL-ALWANI TRADING C0</td>  <!-- column index 1 --> 
 
     <td>3rd column</td>    <!-- column index 2 --> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-11-08 09:23:17 elfan

對於我的壞它不工作。 – techhunter

別擔心，你還可以發佈產生'testTable'的部分嗎？ – elfan

testTable是從Db動態生成的。然而，樣品工作小提琴在這裏添加:) https://jsfiddle.net/Safoora/2j6w9hqt/18/ – techhunter

動態生成數據表的過濾器

回答

相關問題