I am in the middle of a project on my own website and want to add a filter on it, the results are displayed in a HTML table and are pulled in from a mysql database using php and want to add a text filter on the site. I want the filter to work by clicking on a status text link such as open, pending or closed and it filters the results that match that on the same page for that relevant text value. Is that something that can be done using javascript/ajax? Is there any example of the code as been looking online but can't find anything on how to do it
Just found I can use dataTable for what I need and sort of got it working, can this thread be closed if possible please
What I didn't find obvious with dataTable (which is absolutely the tool to use) is how to filter results by buttons elsewhere on the page. Let us know if you need an example.
I may need bit of help if ok as got a issue that am unsure of solving. I can't seem to get the filter to work correctly. The all filter works but the others don't in dataTables, below is the code I currently have <?php echo "<table id='datatable'>"; echo "<thead>"; echo "<tr>"; echo "<th scope='col'>Ticket History</th>"; echo "</tr>"; echo "<tr>"; echo "<th scope='col'>Ticket #</th>"; echo "<th scope='col'>Subject</th>"; echo "<th scope='col'>Status</th>"; echo "<th scope='col'>Last Updated</th>"; echo "<th scope='col'>Action</th>"; echo "</thead>"; echo "<tbody>"; $ctr=1; while($row = mysqli_fetch_array($result)){ // set up a row for each record echo "<tr data-href='view-support-ticket.php?ticket_id=" . $row['ticket_id'] . "'>"; //echo "<td>" . $ctr++ . "</td>"; echo "<td data-label='Ticket #'>" . $row['ticket_id'] . "</td>"; echo "<td data-label='Ticket Subject'><a href='view-support-ticket.php?ticket_id=" . $row['ticket_id'] . "'>" . $row['ticket_subject'] . "</a></td>"; if ( $row['ticket_status'] == 'OPEN' ) echo '<td data-label="Ticket Status" style="color: purple;">' .$row['ticket_status']. '</td>'; else if ( $row['ticket_status'] == 'PENDING SUPPORT' ) echo '<td data-label="Ticket Status" style="color: blue;">' .$row['ticket_status']. '</td>'; else if ( $status == 'CLOSED' ) echo '<td data-label="Ticket Status" style="color: green;">' .$row['ticket_status']. '</td>'; //echo "<td data-label='Status'><a href='view-support-ticket.php?ticket_id=" . $row['ticket_id'] . "'>" . $row['ticket_status'] . "</a></td>"; echo "<td data-label='Last Updated'>" . $row['ticket_timestamp'] . "</td>"; echo "<td data-label='Actions'><a href='view-support-ticket.php?ticket_id=" . $row['ticket_id'] . "'>View</a></td>"; echo "</tr>"; } echo "</tbody>"; echo "</table>"; <li><a href="#" class="noline" id="pendingsupport"><i class="fa fa-circle-thin" aria-hidden="true"></i> Pending Support<span class="badge pull-right">5</span></a></li> <li><a href="#" class="noline" id="open"><i class="fa fa-circle-thin" aria-hidden="true"></i> Open<span class="badge pull-right">1</span></a></li> <li><a href="#" class="noline" id="closed"><i class="fa fa-circle-thin" aria-hidden="true"></i> Closed<span class="badge pull-right">150</span></a></li> <li><a href="#" class="noline" id="all"><i class="fa fa-circle-thin" aria-hidden="true"></i> All<span class="badge pull-right">187</span></a></li> <script> var dataTables = $('#datatable').DataTable({ "info": false, "lengthChange": false, "dom": 'lrtip' }); $('#all').on('click', function () { dataTables.columns(4).search("", true, false, true).draw(); }); $('#pendingsupport').on('click', function () { dataTables.columns(4).search("PENDING SUPPORT", true, false, true).draw(); }); $('#open').on('click', function () { dataTables.columns(4).search("OPEN", true, false, true).draw(); }); $('#closed').on('click', function () { dataTables.columns(4).search("CLOSED", true, false, true).draw(); }); </script> Code (markup):
UPDATE: Update, think I have just got it working with the following code ``` <ul class="nav"> <li><a href="#" class="noline" id="pendingsupport"><i class="fa fa-circle-thin" aria-hidden="true"></i> Pending Support<span class="badge pull-right">5</span></a></li> <li><a href="#" class="noline" id="open"><i class="fa fa-circle-thin" aria-hidden="true"></i> Open<span class="badge pull-right">1</span></a></li> <li><a href="#" class="noline" id="closed"><i class="fa fa-circle-thin" aria-hidden="true"></i> Closed<span class="badge pull-right">150</span></a></li> <li><a href="#" class="noline" id="all"><i class="fa fa-circle-thin" aria-hidden="true"></i> All<span class="badge pull-right">187</span></a></li> </ul> <script> var dataTables = $('#datatable').DataTable({ "info": false, "lengthChange": false, "dom": 'lrtip', "ordering": false }); $('#all').on('click', function () { dataTables.columns(2).search("").draw(); }); $('#pendingsupport').on('click', function () { dataTables.columns(2).search("PENDING SUPPORT").draw(); }); $('#open').on('click', function () { dataTables.columns(2).search("OPEN").draw(); }); $('#closed').on('click', function () { dataTables.columns(2).search("CLOSED").draw(); }); </script> Code (markup): ```
That will do the trick so long as the user isn't searching on anything else. I'm literally taking a break from coding up one of these myself Here's how I approach it - but I'm not an expert on javascript or ux. Before releasing I'll take out the console.log - have left for now as an example of how to debug. <script> $('#getInvoiceTable').DataTable({ "ajax": { "url": "/json.php?endpoint=Invoices&action=Read", "data": function (d) { d.invoice_status = ''; $('input[name="invoice_status"]:checked').each(function() { console.log(this.value); d.invoice_status = d.invoice_status + ',' + this.value; }); d.dates = ''; $('input[name="dates"]:checked').each(function() { console.log(this.value); d.dates = d.dates + ',' + this.value; }); } }, "processing": true, "serverSide": true, "columns": [ {"data": "contact"}, {"data": "status"}, {"data": "total", "orderable": false}, {"data": "amount_paid", "orderable": false}, {"data": "amount_due", "orderable": false}, {"data": "due_date"} ], "paging": true }); $('input[name="invoice_status"]').mouseup(getInvoiceRedraw); $('input[name="dates"]').mouseup(getInvoiceRedraw); function getInvoiceRedraw() { var getInvoiceTable = $('#getInvoiceTable').DataTable(); setTimeout(function () { getInvoiceTable.draw(false); }, 100); } </script> Code (markup):
Thank you but to be honest am new to dataTables and still getting the hang of it so that went over my head to be honest but seems to be working the way I done it I do need bit further help though, I want the pagination buttons to look the same as my other buttons on the site, I have bootstrap 3.3.7 on the site and be good if the pagination buttons can match the look of the other buttons I have on the site. I can't work out how to change the pagination button classes so they look the same
Not major deal but would be nice if looked the same, I found the following link: https://lubus.in/blog/datatables-js-change-pagination-button-class-283 but unsure where the coding goes
Managed to alter the css for the pagination buttons using the following #datatable_previous a { } #datatable_next a { } .pagination > .active > a { }
Well done! My two sites that use datatables don't have any other pagination so I've been able to run with the standard look. One other thing... I find debugging complex json feeds can be a trial but with datatables I'm able to attach variables, debug information to the output array and read it in the network panel of developer tools.
Thank you Oh right I've not looked at json feeds for it yet as not really needed for the project I am doing but never know in the future I may need it and will have a look