Need Fix: Select Inputs / Number Decimal / Clear Button

jscodemonkey

Test Case: http://live.datatables.net/hekiluha/2/
Plug-ins:
* https://datatables.net/examples/api/multi_filter_select.html
* https://datatables.net/examples/plug-ins/range_filtering.html

I understand some of this is 'nice to have', but I think its possible. This is my first project using datatables, so far it's a great tool. Due to how my UI has been done, the filters are not part of the initial table which is why I'm using separate divs for these areas. I hope this can be done with the select drop-down.

Please let me know if there are any questions or if there is any confusion.

I'm trying to find a fix for 3 things:
1. Get the drop-down select filter to work
2. If possible, get range filter to include decimal place (ex: 8.5)
3. Fix my clear all button

Drop-Down Select: Note: I know the ascend/descend almost does the same thing, but I'm being asked for this functionality
* Once working, I'd like it to only work for 1 column
* For this example, let's go with the 'title' column
* Have the select load into my specific div set for it, not in table header (this is for styling and mark-up reasons)

Range Filter Decimal: Note there is a 8.4 in the risk score
* Use min: 6 and max: 8.8 (8.4 disappears)
* Is there a way for the filter to use 1 decimal place and not just a whole number?

Fix clear button: Put in current date and listings disappear and then click clear (doesn't work)
* Trying to get my clear button to clear all search/input/drop-down/filters and have the table redraw to it's start/default state

jscodemonkey

Just a side note - Am I using all the correct js files in my html? Am I using too many? Seems excessive Just want to confirm it's correct or if I have it all wrong.

kthorngren

Get the drop-down select filter to work

You can use the code in this example. Change the jQuery selector $(column.footer()) used in .appendTo( $(column.footer()).empty() ) to match your div.

If possible, get range filter to include decimal place (ex: 8.5)

Try changing these statements to use parseFloat():

        var minRiskScore = parseInt( $('#minRisk').val(), 10 );
        var maxRiskScore = parseInt( $('#maxRisk').val(), 10 );

Fix clear button: Put in current date and listings disappear and then click clear (doesn't work)

Not sure why either. I used the example (dt.val("2021-12-31");) shown in the docs to try clearing the inputs:

  $('.clear').on('click', function(){
      $('input').val('');
      minDate.val('');
      maxDate.val('');
      console.log('clear', minDate.val())

      table.search( '' ).columns().search( '' ).draw();
    });

See this example:
http://live.datatables.net/hekiluha/3/edit

The output shows the date selected not the cleared value. @allan or @colin will need to let us know the problem.

@allan @colin There doesn't seem to be a link to specific DateTime plugin API's. The API links go to the full API docs. Is this expected.

You might want to make $('input').val(''); more specific as it will clear all input elements on the page, like the Datatables search input. Maybe use the jQuery attribute equals selector.

Kevin

jscodemonkey

@kthorngren - thanks, all of this works except 1 concept

how can I limit the drop down to work for just 1 column?

Currently there is this:

column.data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );

I tried changing it to read a column index

table.column(#).data()...

column.eq(#).data()...

I dont need drop downs for each column, just 1 of them. In my test case, I'd say the title column. Suggestions?

kthorngren

Change the loop to loop through the desired columns. Change this.api().columns().every( function () { to this.api().columns( [3] ).every( function () {. The parameter is an array of column numbers. See the columns() docs.

Kevin