Loop through multiple Datatables and search using table ID

xanabobana

Link to test case: https://dev.vmc.w3.uvm.edu/xana/climateIndicators/studies
Debugger code (debug.datatables.net):
Error messages shown: tableID.column is not a function
Description of problem:

I have initialized multiple data tables on a page using their class. Now I want to search each of the tables separately using the table ID and a string contained in a link value. I'm not sure if I am going about this the correct way but here is my code...

The link and table HTML (there are many more of these, I just pulled the first 2 as an example):

<div class="find-table">
       <div class="row ml-4">
            <div class="col">
                   <div class="collapse subCategories-show">
                          <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Brook Trout"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
                   </div>
             </div>
        </div>
        <div class="row ml-4">
             <div class="col">
                 <div class="collapse table-show">                      
                       <div class="table-responsive">
                              <table id="studyTableBrookTrout" class="table table-striped study-table" style="width:100%">
                              <thead>
                                  <tr>
                                     <th>ID</th>
                                     <th>Study</th>
                                     <th>Indicator Categories</th>
                                     <th>Years</th>
                                     <th>Org</th>
                                   </tr>
                               </thead>
                              </table>
                         </div>
                    </div>
               </div>
         </div>
</div>
                                                                                                        <div class="find-table">
     <div class="row ml-4"><div class="col">
           <div class="collapse subCategories-show">
                <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Moose Population"><i class="fa fa-plus-circle"></i></a> Moose Population</h5>
           </div>
     </div>
 </div>
 <div class="row ml-4">
      <div class="col">
            <div class="collapse table-show">                       
                  <div class="table-responsive">
                        <table id="studyTableMoosePopulation" class="table table-striped study-table" style="width:100%">
                        <thead>
                            <tr>
                               <th>ID</th>
                               <th>Study</th>
                               <th>Indicator Categories</th>
                               <th>Years</th>
                               <th>Org</th>
                            </tr>
                        </thead>
                        </table>
                     </div>
                </div>
           </div>
      </div>
</div>

Initialize all Datatables with class .study-table:

    var table = $('.study-table').DataTable({

        "columnDefs": [
            {"targets": 1,
                "orderable": true,
                "createdCell": function (cell, cellData, rowData, rowIndex, colIndex) {
                    $(cell).html('<a href="#studyinfo" data-toggle="modal" data-target="#studyModal" class="viewstudy color__green font__semibold" value="' + rowData.studyID + '">' + cellData + '</a>')
                }
            }
        ],
        "data": tableInfo,
        "columns": [
            {data: 'studyID',
                orderable: true
            },
            {data: 'title',
                orderable: true
            },
            {data: 'indicators.ciSubCats',
                render: "[, ]"
            },
            {data: 'years[]',
                render: function (data, row) {
                    var output = '';
                    $.each(data, function (index, item) {
                        output += '<p>' + data[index].startYr + '-' + data[index].endYr + '</p>';
                    });
                    return output;
                }
            },
            {data: 'studyOrg',
                orderable: true
            }           

        ]
    });

Find search value and table ID to search (this part isn't working, I get an error tableID.column is not a function. I'm not sure how to search a table using the ID?)

$('.table_carat').each(function(){
   avalue=$(this).attr("value");
   tableID="studyTable"+avalue.replace(/\s/g, '');
   tableID.column(2).search(avalue, true, false).draw();
 });

kthorngren

You will probably want to use attr("id") to get the table id. Then you will need to get an instance of the Datatable API for that table. See if this works:

$('.table_carat').each(function(){
  avalue=$(this).attr("value");  // Is this the link value?  Doesn't seem like the correct selector
   var id = $(this).attr("id");
   $(id).DataTable().column(2).search(avalue, true, false).draw();
 });

I think you will need to change how you are getting the avalue. In the loop $(this) will be the table element.

Kevin

xanabobana

Thanks! That got me on the right track:

.table_carat is the class for a link, not the table. I added the value to the table definition and then used this code, which worked!

$('.study-table').each(function(){
var avalue=$(this).attr("value");
var id = $(this).attr("id");
$('#'+id).DataTable().column(2).search(avalue, true, false).draw();
});