Create render list search in front end using dataTable

Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your front controller then this post may help you to create new search just like prestashop create in renderList.

Let create a demo table for showing some information like –

<div class="order_table">
	<table class="table table-hover" id="my-orders-table">
		<thead>
			<tr>
				<th class="no-sort">{l s='ID' mod='module_name'}</th>
				<th class="no-sort">{l s='Reference' mod='module_name'}</th>
				<th class="no-sort">{l s='Total' mod='module_name'}</th>
				<th class="no-sort">{l s='Payment' mod='module_name'}</th>
				<th class="no-sort">{l s='Date' mod='module_name'}</th>
			</tr>
		</thead>
		<tbody>
			{if isset($myorders)}
				{foreach $myorders as $order}
				<tr class="order_row">
					<th>{$order.id}</th>
					<th>{$order.reference}</th>
					<th>{$order.total}</th>
					<th>{$order.payment}</th>
					<th>{$order.date}</th>
				</tr>
				{/foreach}
			{/if}
		</tbody>
	</table>
</div>

Above code will create a table  with order information. After this we need to initialize our dataTable, so we can work further to create search field for each column.

Note – To create each column search we need to use updated library of dataTable, Current version is 1.10.13 (Till Date). If you’re using older version then it might not be supported and will throw JS error as well.

JS Code to create search box for each column  –

// Setup - add a text input to each column
$('#my-orders-table thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input class="form-control col-md-2" type="text" placeholder="Title of field"/>' );
});

JS code to make each column searchable : –

$(document).ready(function() {
    // DataTable
    var table = $('#my-orders-table').DataTable();
    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        });
    });
});

In the above code… first we have initialized our table with DataTable() function and store it in a javascript variable name table.

Now, we can use each function of javascript to make each column as searchable by using column() function of dataTable.

By using these few line of js code, we can implement each column search for our table.

See the out in the screenshot…