Filtering multiple columns problem when hiding columns

Filtering multiple columns problem when hiding columns

rfitzwaterrfitzwater Posts: 57Questions: 5Answers: 1
edited September 2011 in DataTables 1.8
I have a table setup with inputs in each column footer so you can filter each column. This works when all columns are displayed. When I hide certain columns, the filtering gets screwed up. If I hide col. 2 then enter filter criteria in col 3 (which is now 2 since two is hidden), it is filtering the hidden column.

An example can be found here: http://comm.rider.edu/registrar/law_all.html

Try filtering on local cap column, and you will see it is actually filtering based on Enrolled column.

Any help is appreciated.

Thanks,

-Rhon

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    Line 141, you are using the table column index to call fnFilter, assuming that the correct datatables column index will be affected.

    when you hide columns, apparently this correspondence between html column and datatables column is broken

    what you should do is map the id of each footer input to a datatable column, not rely on the html table index.
  • DriverDriver Posts: 23Questions: 0Answers: 0
    Could someone post any code for this? I hide a few of my columns and searching is broken...
  • rfitzwaterrfitzwater Posts: 57Questions: 5Answers: 1
    fbas - can you point me to a page where I can find more info on mapping the id of each footer input to a data table column? Or if you have know of an example page I can look at, that would be great too.
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited September 2011
    to simplify mapping, in code where I've done similar things, I use a name/id for my DOM elements that is similar or the same to database field names, so I can programmatically alter the id to get the field name. once I have the field name, I look into oTable.fnSettings().aoColumns for the column with a matching sName (I set sName for all my columns in datatables, in the aoColumns during initialization)

    NOTE: I have a global var set to oTable.
    if no match is found, I return -1, so make sure your code detects NOT FOUND scenario
    [code]
    // get column number for a given column name. (check the datatable settings column name info)
    // return -1 for not found
    function get_column_number(name) {
    name = name.toLowerCase(); // case insensitive match, cast all to lowercase
    var aoColumns = oTable.fnSettings().aoColumns;
    var numcols = aoColumns.length;

    for (i=0; i
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited September 2011
    during initialization, I set sName:

    [code]
    "aoColumns": [
    { "sName": "QAid", "sType" : 'qaid', "sWidth": 80 },
    { "sName": "QAid", "sTitle": "Action", "sWidth": 30, fnRender: make_delete_link, "bSortable": false, "bSearchable": false },
    { "sName": "Status", "sWidth": 60, "bSortable": false},
    { "sName": "DateReceived", "sWidth": 70, "sClass": "center", "sType": "string" },
    { "sName": "DateCompleted", "sWidth": 70, "sClass": "center", "sType": "string" },
    { "sName": "Author", "sWidth": 150 },
    { "sName": "Contract", "sWidth": 125 },
    { "sName": "Title", "sWidth": 100 },
    { "sName": "Description", "sWidth": 200 },
    { "sName": "Illustrator", "sWidth": 80 },
    { "sName": "notes", "sWidth": 140 },
    { "sName": "bText", "sWidth": 40, "bSortable": false },
    { "sName": "bPowerpoint", "sWidth": 40, "bSortable": false },
    { "sName": "bPoster", "sWidth": 45, "bSortable": false },
    { "sName": "bOverhead", "sWidth": 45, "bSortable": false },
    { "sName": "bSlide", "sWidth": 40, "bSortable": false },
    { "sName": "bMap", "sWidth": 40, "bSortable": false },
    { "sName": "bReprint", "sWidth": 45, "bSortable": false },
    { "sName": "other", "sWidth": 80 } ,
    { "sName": "pub_code", "sWidth": 150 },
    { "sName": "0 as relevance", "sTitle": "relevance", "sWidth": 30 }
    ],
    [/code]
  • rfitzwaterrfitzwater Posts: 57Questions: 5Answers: 1
    fbas - Thanks. I was able to get it working properly.
  • rfitzwaterrfitzwater Posts: 57Questions: 5Answers: 1
    Actually, I don't have it working quite right. Searching works on all of the columns that were visible during page load. If I make an column visible and try to filter using the column filter it does not filter results. Any idea why? My link above has been updated with new code that gets me this far.
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    rather than .keyup(), try using .live() so that if/when an input comes into scope, it will have your event/function attached to it.
  • rfitzwaterrfitzwater Posts: 57Questions: 5Answers: 1
    Changing it to the code below fixed the issue completely. Now up and running fully.

    $("#" + this + ':input').live('keyup', function () {

    Thanks!
This discussion has been closed.