Filter results using text link

[ianhaney1]

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. I was unsure if is something done in php or if can be done using javascript/ajax?

[ianhaney1]

Just found I can use dataTable for what I need and sort of got it working, can this thread be closed if possible please

[John_Betong]

For the benefit of other users please supply details of your solution.

I did search for “data table” and found numerous references. I was unable to associate any suggestion to this problem.

[ianhaney1]

I have not solved it 100% as the filter is not working on some statuses for some reason, it’s only working for the all status to show all support tickets

[ianhaney1]

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>