Datatables Filter dropmenu

Question

i Want to filter Datatables using this line data: ["Accepted", "Delivered", "Pending", "Cancel"], filter_default_label: "Select Status" but the data which will be filter is already in drop-menu [enter image description here][1] like here in the image the drop-menu show pending so if there was other word like cancel okay i want to filter all the rows on the table which show pending not cancel in the table

If you are selecting cancel, are you saying you still need to show pending and not cancel? — G_S, Feb 27 '18 at 07:41
like if i have some rows showing pending and other show cancel and other show accepted and when i filter i want only to show rows which has cancel not the other rows — Hussein Zaki, Feb 27 '18 at 11:07
@HusseinZaki you want to filter a certain column based on selected value in drop downs in the different rows? That might be possible using custom filter (with custom filtering function) please provide a jsfiddle test page so it will be possible to debug... — Daniel, Feb 27 '18 at 12:15
@Daniel https://codepen.io/HusseinZaki/pen/oEJNEM here is the code in codepen — Hussein Zaki, Feb 27 '18 at 18:59

score 1 · Accepted Answer · answered Feb 27 '18 at 21:35

1

So basically your column should use the custom_func, see complete column setup below:

{    
    column_number : 2, 
    data: ["Accepted", "Delivered", "Pending", "Cancel"], filter_default_label: "Select Status", 
    filter_type: 'custom_func', 
    custom_func: myCustomFilterFunction
},

where myCustomFilterFunction should look like this:

 function myCustomFilterFunction(filterVal, columnVal) {
        var found;
        if (columnVal === '') {
            return true;
        }
        if ($(columnVal).val() === filterVal) {
            return true;
        }
        return false;
 }

But in order for that to work you must update each select when its being changed (its html/datatbles data) should be updated after each change - otherwise the old value will remain as selected in the table and yadcf wont be able to tell its updated value

see following test page

answered Feb 27 '18 at 21:35

Daniel

36,833
10
119
200

check now, try to filter for *accepted* value and you will see two rows, in this example I set the selected inside the table html while in *real life8 you will have to add the code that updates datatables model / html after each select change so the yadcf filter will know the updated data – Daniel Feb 27 '18 at 22:27
that's what i am trying to do , i want to when i change in the table to cancel without going back to html and adding selected do the same work, can you help me in this – Hussein Zaki Feb 27 '18 at 22:47
not sure what you mean but you can filter if your data in the table is not synced / updated – Daniel Feb 28 '18 at 08:17
@Dainel could you add the code that updates datatables model / html after each select change so the yadcf filter will know the updated data please – Hussein Zaki Feb 28 '18 at 10:09
@Dainel i mean i want know when i am in table without adding selected inside the table html when click on option let's say it is cancel it will added selected to it so when i am filter to cancel value i will say only cancel , can you help me in this – Hussein Zaki Feb 28 '18 at 10:58
you have to find out how (ask a question on datatables forum / here) to sync the datatables data with the updated/modified selectors in your column (I know its possible I even answered a similar question some years ago in SO) – Daniel Feb 28 '18 at 11:19
@HusseinZaki , here I found it https://stackoverflow.com/questions/13645668/jquery-datatables-update-table-cell-after-button-click/13682821#13682821 I think you need to do something similar, bind your select inputs so the will update the table, then I think the filter will work as expected, please let me know when It work / show code – Daniel Feb 28 '18 at 11:22
then I suggest you to open a new question on datatables forum and provide a test page (like the one I posted here) and ask how can you update the "model" of the datatables so when changing the drop down on each row the data will get updated – Daniel Feb 28 '18 at 12:29
can you show me how to do it " bind your select inputs so the will update the table " ? please – Hussein Zaki Mar 03 '18 at 12:53
Looks like it can be done without updating the model of datatables, see example https://codepen.io/vedmack/pen/ddLjqv notice that I have added class to every select element `row1` / `row2` / etc.... and I;m using this class later on in the filter function to grab its value and compare against the filter, you should delete your other question on stackoverflow because they are not needed anymore – Daniel Mar 03 '18 at 20:35

Datatables Filter dropmenu

1 Answers1