Replace first column filter with a reset button to reset search inputs

jagsweb

I have datatables onsite and running at http://www.pacesetterexhaust.com/cat-data/html

I am using column filtering on all of the columns and today I added the child rows feature which turns the first column into a drop control for the child row. I want to remove the first search box and replace it with a reset button that will reset all of the search fields.

 <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Category</th>
            <th>Year</th>
            <th>Make</th>
            <th>Model</th>
            <th>Engine</th>
            <th>Part #</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th></th>
            <th>Category</th>
            <th>Year</th>
            <th>Make</th>
            <th>Model</th>
            <th>Engine</th>
            <th>Part #</th>
        </tr>
    </tfoot>
    </table>


  /* Formatting function for row details - modify as you need */
 function format ( d ) {
 // `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-   right:50px;">'+
    '<tr>'+
        '<td>Location:</td>'+
        '<td>'+d.Location+'</td>'+
        '<td rowspan="3">'+d.Thumb+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Notes:</td>'+
        '<td>'+d.Notes+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Engine Code:</td>'+
        '<td></td>'+
    '</tr>'+
 '</table>';
}

$(document).ready(function() {
 // Setup - add a text input to each footer cell
 $('#example thead th').each( function () {
    var title = $('#example thead th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 } );

 var table = $('#example').DataTable( {
    "ajax": "../data/cat-data.txt",
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "LongDesc" },
        { "data": "Year" },
        { "data": "Make" },
        { "data": "Model" },
        { "data": "Engine" },
        { "data": "PartNumber" }
    ],
    "order": [[1, 'asc']],
    "bSort": false,
    "bPaginate": true,
    "bLengthChange": true,
    "bInfo": false,
    "bAutoWidth": true,
    "iCookieDuration": 60*60*24, // 1 day
   } );

 // Add event listener for opening and closing details
 $('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).parents('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
  } );

   // Apply the filter
$("#example thead input").on( 'keyup change', function () {
    table
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
 } );


  } );

jagsweb

I tried the information in this post http://datatables.net/forums/discussion/9440/reset-button-for-input-and-select/p1 While it cleared out the input boxes, it did not reset the table :(

Trupti

Hi,

Please try using this function on button click call.

function call()
{
var oTable = $("#example").dataTable();
var oSettings = oTable.fnSettings();
for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
oSettings.aoPreSearchCols[ iCol ].sSearch = '';
}

oTable.fnDraw();

}

jagsweb

Thanks trupti

That didnt work, When you press the button all of the fields are cleared but the table isn't reset. So if you last search reduced the table results to 100, your next search only searches those rows, not the entire table. I've tried a bunch of different things from different posts to no avail. This is not a feature that I cannot live without.

What i really need to fix is removing the search input box from the first column since Im using child rows and the first column is all the drop arrow http://www.pacesetterexhaust.com/cat-data.html for an example of both issues.