How to Set/Filter a View Via JSON Data

kraftomatic

Hi All,

I have a basic table, pulling data from a text file. For each person's name, I would like to assign one of three types to that person, but not show the types in the table. I am trying to build a dropdown/filter that would show these three types. The dropdown would look like this:

All
Filter1
Filter2
Filter3

And flipping those dropdown values would update the view of the table on the fly, showing either all the names or a subset of them. I'm not sure how to implement this both in the data file, and within the HTML itself.

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Name</th>
                <th>Total</th>
                <th>Prologue</th>
                <th>Stage 1</th>
                <th>Stage 2</th>
                <th>Stage 3</th>
        </tr>
        </thead>

        <tfoot>
            <tr>
                <th>&nbsp;</th>
                <th>Name</th>
                <th>Total</th>
                <th>Prologue</th>
                <th>Stage 1</th>
                <th>Stage 2</th>
                <th>Stage 3</th>
            </tr>
        </tfoot>
    </table>

    {
      "data": [
        [
            "img",
          "Tiger Nixon2",
          "50",
          "25",
          "25",
          "25",
          "25"
        ],
            [
            "img",
          "Tiger Nixon2",
          "50",
          "25",
          "25",
          "25",
          "25"
        ]
      ]
    }

Any help is appreciated. Thank you.

kthorngren

Here is a select filter example you can start from.

You can use columns.visible to hide the column. Use columns.render in the hidden column to render the filter1, filter2, etc values as per your requirements. Set the select filter event to use-api column().search()for the hidden column. Usecolumn().search( "" )for theAll` option.

If you need further help please build a simple test case showing what you hae so we can provide more specific help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kraftomatic

Thanks Kevin. This got me started in the right direction. Here's my sample code:

http://live.datatables.net/yohuluco/1/edit

I've hidden the one column and now have a dropdown/filter for it, but a couple things I'm trying to still do:

1. Have the dropdown/filter be up next to the search input and display "All" by default in the dropdown.

2. Only have one filter for this specifically, not every column of data

3. As a bonus, be able to set a CSS class to each of the three dropdown values, so I can apply a different color to each name (relative to the dropdown type), when displaying "All" results.

Thanks a bunch for your help.

Ed

kthorngren

Have the dropdown/filter be up, next to the search input. Display "All" by default.

You can place the input anywhere you like. This example will show how to place elements with the Datatables elements.

Only have one filter for this specifically, not every column of data

The columns() API supports many column-selector options. You can do something like this for column 1:

this.api().columns( [1] ).every( function () {

Kevin