Question

我再次提出这个问题，因为我找到了任何正确的想法。我正在尝试实现该功能，以根据供应商名称过滤项目。根据供应商名称的项目列。我被困在这里一个星期。尝试了许多方法，但没有工作。我的要求步骤如下。

我从DB获得了所有供应商的名称。
使用检索到的供应商名称作为过滤器名称列表:<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为＃34; Mine＆＃34;和下拉ID＆＃34; Myselect＆＃34;：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>

Answer 1

$(this).val()是指value的{{1}}属性，其中包含ICODE，该属性将传递给<option>。

例如，如果html输出是这样的：

fnFilter

如果选中它，使用当前代码，构造的正则表达式将为<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和( )之间使用pa ^括起模式。 $，必须转义所有特殊的正则表达式字符，即^(CL 1\/2|CL 3\/4|CU EL 45 1\.1)$。此外，fnFilter doesn't recognize space so我们需要使用\s而不是文字空间。最终的正则表达式是^(CL\s1\/2|CL\s3\/4|CU\sEL\s45 1\.1)$。

查看当前代码（fnFilter的第二个参数为0，即第一列），我假设您将在第一列中显示ICODE，并在另一列中显示供应商名称。见下图。

替代解决方案＃1 根据ICODE过滤

$(document).ready(function() {
  var table = $('#mine').DataTable();

  $('#mySelect').on('change', function() {
    var selectedValue = $(this).val();
    var patt = selectedValue.replace(/[\[\]\/\{\}\(\)\*\+\?\.\\\^\$-]/g, "\\$&");	//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 （如下面评论中的聊天对话中所示）。如果您有多个具有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, "\\$&");	//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>

动态生成数据表

1 个答案: