Filter datatable base on button input

phsycomig

Hello,

Sorry for asking this question, but i have no experience with javascript at all, if a good Samaritan could help me out, i would be grateful.

Currently what i have is, a datatable filled with data based on my model, this is not done by javascript but simply a loop in my view. I have 4 buttons at the buttom of my view, each button should display certain data in my table.

i have 3 string values, each one represent a filtering property, and the last button should display all data. i hope you understand what i mean.

example:

<table id="demo">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        ---- Loop here
        <tr>
            <td>1</td>
            <td>Gabe</td>
            <td>50</td>
        </tr>
    </tbody>
</table>
<button>Young</button>
<button>Mid</button>
<button>Old</button>
<button>All</button>

i have a method to determine if a person is young, mid or old (this is just for demonstration). What i need is my javascript connected to my table, to show data based on my button input, to show all people that is young, mid or old.

This is my JS that i actually use

<script>
    $.fn.dataTable.moment('DD-MM-Y');
    var $dTable = $('#demo').each(function (index) {
        $(this).DataTable({
            order: [$(this).find('th').length - 1, 'asc'],
            pageLength: 26,
            orderClasses: false,
            columnDefs: [
                {
                    orderable: false,
                    targets: [1],
                },
                {
                    bVisible: false,
                    aTargets: [0]
                }
            ],
            scrollY: '60vmin',
            scrollCollapse: true
        });
    });
    $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
</script>

colin

Hi @phsycomig ,

If I understand correctly, you just need the button click to trigger search() or column().search(), something like this.

If that's not the case, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

phsycomig

Hi @Colin

Sorry for the bad answering method, didn't realize i could provide a live demo, but your example live.datatables.net/butuwari/1/edit worked as intended.

After a bit of modification it now works perfect, thank you once again