Usando una lista desplegable para filtrar una tabla (tablas de datos)

Estoy usando el complemento jQuery de dataTables (que es totalmente increíble), pero tengo problemas para que mi tabla se filtre en función del cambio de mi cuadro de selección.

Función:

$(document).ready(function() { $("#msds-table").dataTable({ "sPaginationType": "full_numbers", "bFilter": false }); var oTable; oTable = $('#msds-table').dataTable(); $('#msds-select').change( function() { oTable.fnFilter( $(this).val() ); }); }); 

HTML:

    All Group 1 Group 2 Group 3 Group 4 Group 5 Group 6  
Column 1 Column 2 etc
Group 1 Download
Group 1 Download
Group 1 Download

La tabla continúa mostrando un montón de elementos, hasta el “Grupo 6”, pero entiendes la idea. ¿Alguien ha intentado hacer esto antes?

características de dataTables

Sabía que había hecho esto antes, y tienes que ver esta pequeña información:

Tenga en cuenta que si desea utilizar el filtrado en las Tablas de datos, esto debe seguir siendo “verdadero”: para eliminar el cuadro de entrada de filtrado predeterminado y conservar las capacidades de filtrado, use sDom .

debe configurar {bFilter: true} y mover su a un elemento personalizado registrado a través de sDom. Puedo adivinar que tu código se verá así:

 $(document).ready(function() { $("#msds-table").dataTable({ "sPaginationType": "full_numbers", "bFilter": true, "sDom":"lrtip" // default is lfrtip, where the f is the filter }); var oTable; oTable = $('#msds-table').dataTable(); $('#msds-select').change( function() { oTable.fnFilter( $(this).val() ); }); }); 

su código para oTable.fnFilter( $(this).val() ); no disparará mientras {bFilter:false}; segun la documentacion

  $.extend( true, $.fn.dataTable.defaults, { "bFilter": true, initComplete: function () { this.api().column(1).every( function () { var column = this; var select = $('') .appendTo( $(column.header()).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( '' ) } ); } ); }, } ); 

Usa este código:

  $('.btn-success').on('click',function (e) { //to prevent the form from submitting use e.preventDefault() e.preventDefault(); var res = $("#userid").val(); var sNewSource = "myaccount/MyData_select?userid=" + res + ""; var oSettings = ETable.fnSettings(); oSettings.sAjaxSource = sNewSource; ETable.fnDraw(); }); 
Intereting Posts