1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

filter results by clicking a text link

Discussion in 'JavaScript' started by Ian Haney, Mar 15, 2020.

0
  1. #1
    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
     
    Ian Haney, Mar 15, 2020 IP
  2. Ian Haney

    Ian Haney Banned

    Messages:
    131
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    78
    #2
    Just found I can use dataTable for what I need and sort of got it working, can this thread be closed if possible please
     
    Ian Haney, Mar 15, 2020 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #3
    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.
     
    sarahk, Mar 15, 2020 IP
  4. Ian Haney

    Ian Haney Banned

    Messages:
    131
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    78
    #4
    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):
     
    Last edited by a moderator: Mar 16, 2020
    Ian Haney, Mar 16, 2020 IP
  5. Ian Haney

    Ian Haney Banned

    Messages:
    131
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    78
    #5
    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):
    ```
     
    Last edited by a moderator: Mar 16, 2020
    Ian Haney, Mar 16, 2020 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #6
    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 :)

    upload_2020-3-16_22-25-2.png

    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):
     
    sarahk, Mar 16, 2020 IP
  7. Ian Haney

    Ian Haney Banned

    Messages:
    131
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    78
    #7
    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
     
    Ian Haney, Mar 16, 2020 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #8
    Yeeeeah, there will be a way but I haven't tackled that. How big a deal is it?
     
    sarahk, Mar 16, 2020 IP
  9. Ian Haney

    Ian Haney Banned

    Messages:
    131
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    78
    #9
    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
     
    Ian Haney, Mar 16, 2020 IP
  10. Ian Haney

    Ian Haney Banned

    Messages:
    131
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    78
    #10
    Managed to alter the css for the pagination buttons using the following

    #datatable_previous a {

    }

    #datatable_next a {

    }

    .pagination > .active > a {

    }
     
    Ian Haney, Mar 16, 2020 IP
    sarahk likes this.
  11. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #11
    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.
     
    sarahk, Mar 16, 2020 IP
  12. Ian Haney

    Ian Haney Banned

    Messages:
    131
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    78
    #12
    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
     
    Ian Haney, Mar 16, 2020 IP