我需要过滤bootstrap jQuery数据表

时间：2017-08-09 04:28:41

标签： javascript jquery twitter-bootstrap datatable datatables

  

我需要过滤数据表。我已经编写了代码及其工作，但是当我通过点击按钮更改状态时，它就无法正常工作。

     

即：如果有启用按钮我单击它然后它将被更改为禁用按钮。然后如果我过滤表它不起作用。

     

如果有禁用按钮并且我点击它然后它会改变为启用按钮但是对过滤数据表没有任何影响。

     

虽然我正在更改过滤器值，但过滤仍然相同。

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
</head>

<body>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!-- HTML -->
            <table id="data-table" class="table table-hover table-bordered table-stripped">
                <thead>
                    <tr>
                        <th class="text-center">#</th>
                        <th>Category Name</th>
                        <th class="text-center filterable customFilterColumn">Status</th>
                    </tr>
                <thead>
                <tbody>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled">Enabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="minimal" /></td>
                        <td>Shoes</td>
                        <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled">Enabled</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>

<script type="text/javascript">
    $(document).ready(function(){

        var table = $('#data-table').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "aaSorting": [
                ['1', 'asc']
            ],
            /* "order": [], */
            "columnDefs": [{
                /* "targets": [0,-1], */
                "targets": [0,-1],
                "orderable": false
            }]
        });

        function filter(source,customFilterColumn){

            var count = 0;
            var tableid = source.split(' ')[0];

            $(source).each( function ( k ) {

                if ($(this).text() !== '') {

                    if(++count==1){
                        $(tableid).parents("div.row:first").before('<div class="row"><div id="filtercontent"></div></div>');
                    }

                    var i = $(this).index();

                    var select = $('<select id="filer_'+i+'" class="form-control"><option value="">All</option></select>')
                        .insertBefore('#filtercontent')

                        .on( 'change', function () {
                            var val = $(this).val();

                            table.column( i )
                                .search( val ? '^'+$(this).val()+'$' : val, true, false )
                                .draw();
                        } );

                    // Get the Status values a specific way since the status is a anchor/image
                    if ($(this).hasClass(customFilterColumn)) {
                        var dataFilterColumn = [];

                        /* ### IS THERE A BETTER/SIMPLER WAY TO GET A UNIQUE ARRAY OF <TD> data-filter ATTRIBUTES? ### */
                        table.column( i ).nodes().to$().each( function(d, j){
                            var thisStatus = $(j).attr("data-filter");
                            if($.inArray(thisStatus, dataFilterColumn) === -1) dataFilterColumn.push(thisStatus);
                        } );

                        dataFilterColumn.sort();

                        $.each( dataFilterColumn, function(i, item){
                            select.append( '<option value="'+item+'">'+item+'</option>' );
                        });

                    }
                    // All other non-Status columns (like the example)
                    else {
                        table.column( i ).data().unique().sort().each( function ( d, j ) {  
                            select.append( '<option value="'+d+'">'+d+'</option>' );
                        }); 
                    }
                    $('#filer_'+i).wrapAll('<div class="col-sm-2 form-group"></div>');
                    $('<label>'+$(this).text()+'</label>').insertBefore('#filer_'+i);

                }
            });
            $(tableid+'_wrapper').removeClass('form-inline');
        }

        filter('#data-table thead th.filterable','customFilterColumn');

        $('.btn-status').click(function(){
            var id = $(this).val();
            var status = parseInt($(this).attr('status'));

            $(this).toggleClass('status-enabled');
            $(this).toggleClass('status-disabled');
            if(status==0){
                $(this).html('Enabled');
                $(this).attr('status','1');
                $(this).parent().attr('data-filter','Enabled');
            }
            else{
                $(this).html('Disabled');
                $(this).attr('status','0');
                $(this).parent().attr('data-filter','Disabled');
            }
        });

    });
</script>

1 个答案:

答案 0 :(得分：1)

在table.rows().invalidate().draw();点击事件中使用.btn-status即可。问题是你只更新html但不更新数据表数据。有关详细信息，请参阅此链接Datatable row invalidate 

$(document).ready(function() {

  var table = $('#data-table').DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "aaSorting": [
      ['1', 'asc']
    ],
    /* "order": [], */
    "columnDefs": [{
      /* "targets": [0,-1], */
      "targets": [0, -1],
      "orderable": false
    }]
  });

  function filter(source, customFilterColumn) {

    var count = 0;
    var tableid = source.split(' ')[0];

    $(source).each(function(k) {

      if ($(this).text() !== '') {

        if (++count == 1) {
          $(tableid).parents("div.row:first").before('<div class="row"><div id="filtercontent"></div></div>');
        }

        var i = $(this).index();

        var select = $('<select id="filer_' + i + '" class="form-control"><option value="">All</option></select>')
          .insertBefore('#filtercontent')

          .on('change', function() {
            var val = $(this).val();

            table.column(i)
              .search(val ? '^' + $(this).val() + '$' : val, true, false)
              .draw();
          });

        // Get the Status values a specific way since the status is a anchor/image
        if ($(this).hasClass(customFilterColumn)) {
          var dataFilterColumn = [];

          /* ### IS THERE A BETTER/SIMPLER WAY TO GET A UNIQUE ARRAY OF <TD> data-filter ATTRIBUTES? ### */
          table.column(i).nodes().to$().each(function(d, j) {

            var thisStatus = $(j).attr("data-filter");
            if ($.inArray(thisStatus, dataFilterColumn) === -1) dataFilterColumn.push(thisStatus);
          });

          dataFilterColumn.sort();

          $.each(dataFilterColumn, function(i, item) {
            select.append('<option value="' + item + '">' + item + '</option>');
          });

        }
        // All other non-Status columns (like the example)
        else {
          table.column(i).data().unique().sort().each(function(d, j) {
            select.append('<option value="' + d + '">' + d + '</option>');
          });
        }
        $('#filer_' + i).wrapAll('<div class="col-sm-2 form-group"></div>');
        $('<label>' + $(this).text() + '</label>').insertBefore('#filer_' + i);

      }
    });
    $(tableid + '_wrapper').removeClass('form-inline');
  }

  filter('#data-table thead th.filterable', 'customFilterColumn');

  $('.btn-status').click(function() {
    var id = $(this).val();
    var status = parseInt($(this).attr('status'));
    $(this).toggleClass('status-enabled');
    $(this).toggleClass('status-disabled');
    if (status == 0) {
      $(this).html('Enabled');
      $(this).attr('status', '1');
      $(this).parent().attr('data-filter', 'Enabled');
    } else {
      $(this).html('Disabled');
      $(this).attr('status', '0');
      $(this).parent().attr('data-filter', 'Disabled');
    }

    table.rows().invalidate().draw();
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <!-- HTML -->
    <table id="data-table" class="table table-hover table-bordered table-stripped">
      <thead>
        <tr>
          <th class="text-center">#</th>
          <th>Category Name</th>
          <th class="text-center filterable customFilterColumn">Status</th>
        </tr>
        <thead>
          <tbody>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled" status="0">Disabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled" status="0">Disabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled" status="1">Enabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled" status="0">Disabled</button></td>
            </tr>
            <tr>
              <td class="text-center"><input type="checkbox" class="minimal" /></td>
              <td>Shoes</td>
              <td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled" status="1">Enabled</button></td>
            </tr>
          </tbody>
    </table>
  </div>
</div>

相关问题
最新问题