javascript - 动态生成数据表过滤器

Question

我再次问这个问题，因为我没有找到任何正确的想法。我正在尝试实现根据 vendor 名称过滤项目的功能。根据 vendor 名称的项目列。我被困在这里已经一周了。尝试了很多方法但不起作用。我的要求步骤如下。

1. 我从数据库中获取了所有 vendor 的名称。
2. 使用检索到的 vendor 名称作为过滤器名称列表 :<option>vendorname</option>
3. 我可以使用 vendor 代码作为外键获取每个 vendor 的 item_code，每个 vendor 可能有多个 item_code，可能超过 500 个。
4. 现在我想创建一个下拉列表，以便在选择任何 vendor 时，应过滤表中相应的项目代码。

任何建议或步骤将不胜感激。

我最后的努力:

$('#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 为“Mine”且下拉 id 为“Myselect”的数据表添加了工作 fiddle :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您的<option>的属性其中包含 ICODE，它将被传递到 fnFilter .

例如，如果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)$ 。此外，fnFilter doesn't recognize space so我们需要使用\s而不是字面上的空间。最终的正则表达式将是 ^(CL\s1\/2|CL\s3\/4|CU\sEL\s45 1\.1)$ .

查看您当前的代码(其中 fnFilter 的第二个参数为 0，即第一列)，我假设您将在第一列中显示 ICODE，也许在另一列中显示 vendor 名称。请参见下图。

替代解决方案#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根据 vendor 名称进行过滤

代码几乎相同。唯一的区别是我们使用 vendor 名称作为 <option> 的值。 s。正因为如此，fnFilter() 的第二个参数更改为 1(指的是显示 vendor 名称的第二列)。

$(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>