Need Fix: Select Inputs / Number Decimal / Clear Button

Need Fix: Select Inputs / Number Decimal / Clear Button

jscodemonkeyjscodemonkey Posts: 6Questions: 2Answers: 0

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

This question has accepted answers - jump to:

Answers

  • jscodemonkeyjscodemonkey Posts: 6Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    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

  • jscodemonkeyjscodemonkey Posts: 6Questions: 2Answers: 0

    @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?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    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

This discussion has been closed.