时间戳

首页 > 解决方案 > 将 select2 与数据表一起使用以过滤多个值

datatables - 将 select2 与数据表一起使用以过滤多个值

问题描述

我目前正在尝试使用 select2 下拉列表过滤我的数据表的每一列。

我的代码目前在选择标签上没有多个标签的情况下正确过滤，但是一旦我将多个值添加到我的选择标签中，我会收到以下错误：

TypeError: a.replace is not a function

我一直在尝试调整以下数据表 javascript： link

这是我目前拥有的：

$('#caseTable').DataTable( {
            initComplete: function () {
                var x = 0;
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select class="search2" multiple="multiple"><option value=""></option></select>')
                        .appendTo( $('.dropdown'+x)) 
                        .on( 'change', function () { 
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option id="'+d+'"value="'+d+'">'+d+'</option>' )
                    } );

                    x++   
                } );
                $(".search2").select2();

            }
} );

编辑：我设法修复它。我需要将多个值存储到一个数组中，然后将这些值连接在一起以搜索每个单独的值。这是我对 .on('change') 函数所做的更改。

.on( 'change', function () { //when an option is selected
        var val = new Array();
        //set val to current element in the dropdown.
        val = $(this).val();

        if (val.length > 1){

          valString = val.toString();
          valPiped =  valString.replace(/,/g,"|")

             column
               .search( valPiped ? '^'+valPiped+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
               .draw();
         } else if (val.length == 1) {
             column
                .search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
                 .draw();
         } else {
             column
                .search('',true,false)
                .draw();
         }
} );

标签： datatablesjquery-select2

解决方案

我设法修复它。我需要将多个值存储到一个数组中，然后将这些值连接在一起以搜索每个单独的值。这是我对 .on('change') 函数所做的更改。

.on( 'change', function () { //when an option is selected
    var val = new Array();
    //set val to current element in the dropdown.
    val = $(this).val();

    if (val.length > 1){

      valString = val.toString();
      valPiped =  valString.replace(/,/g,"|")

         column
           .search( valPiped ? '^'+valPiped+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
           .draw();
     } else if (val.length == 1) {
         column
            .search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
             .draw();
     } else {
         column
            .search('',true,false)
            .draw();
     }
} );

推荐阅读