Question

我正在尝试使用多选复选框下拉列表来过滤或搜索jquery数据表中的列。例如，如果它是城市列，则表格应该过滤或搜索我是否按照复选框下拉菜单检查两个引用，并在下拉列表中显示已检查引用的结果。我尝试了很多方法来寻找解决方案但是，我现在无法解决它。如果有人可以帮助解决这个问题，我们非常感谢。提前致谢。我只是将jquery代码放在下面供你参考。

<head>
    <meta charset="utf-8">
    <title>jQuery Datatable</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

    <link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

    <script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

    <style>
        * {
            margin:0;
            padding: 0;
        }
        #wrap {
            width: 100%;
            margin: auto;
        }
        .addcolr {
            color: green;
        }
    </style>
    <script>
        /*$(document).ready(function() {
        $('#example th').each(function() {
            alert(this.textContent);
        });
    });*/
        $(document).ready(function() {
          $('#example').DataTable({

            "bFilter": true,
            initComplete: function () {
            this.api().columns(2).every( function () {
                var column = this;
                var select = $('<select id="sel_dropdown" multiple="multiple"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() );
                    /*.on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );*/

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

          });

          $('#example tbody tr td:nth-child(4)').each( function(){

            if($(this).text() == 61) {
                  $(this).css("color","red");
            }
            else if($(this).text() == 47) {
                  $(this).addClass("addcolr");
            }
           });

          //multiselect
          $('#sel_dropdown').multiselect();

          // $('#example').DataTable();

          $('#sel_dropdown').change( function () { 
                $('#example').DataTable().fnFilter( $('#sel_dropdown').val(),2);
            });

        } );
    </script>
</head>
<body>
<div id="wrap"></div></body>

Answer 1

您可以使用Search API

实现这一目标

它允许您构建正则表达式，然后过滤所需的列：

$('#table').DataTable().column(col).search(regex, true, true).draw();

我编写了一个完整的示例供将来参考：

JSFIDDLE

Answer 2

如果您使用angularjs，可以尝试使用Smart table，它非常易于使用！：

＆＃13;

HttpClient

＆＃13;

使用带有复选框的多选下拉列表搜索或过滤jquery数据表中的列

2 个答案: