search is not working in jquery datatables with dynamically populated table

Question

My datatable is not showing any search results even though data is there in table. I am using jquery datatable plugin. I am populating some column's data dynamically and creating some columns for user to input some data later on .

I am using below script/stylesheets

    <script src="media/js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="media/js/jquery.dataTables.js"></script>
    <link href="media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
    <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script>
$(document).ready(function() {
    $('#dbResultsTable').dataTable( {
        "bJQueryUI": true,

        "sPaginationType": "full_numbers" ,

        "paging":   true,

        "ordering" : false,

        "scrollY":false,

        "autoWidth": true,

        "info":     true ,

       "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],

       "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' 

        }

         );


        $('.companyNamesClass').multiselect({
            enableFiltering: true

        }),

           $('#dbResultsTable').on('draw.dt', function () {
            $('.companyNamesClass').multiselect({
                 enableFiltering: true,
            });
        });
    });
</script>

<!--- jsp page code here --->
    <table width="1698" cellspacing="0"  class="elements" id="dbResultsTable" >
     <thead>
       <tr bgcolor="#33FFFF">
        <th>Student</th>
        <th>BranchName</th>
        <th>Year</th>
        <th>Company</th>
        <th>Pkg</th>
      </thead>
    <tbody>
          <c:forEach var="indexMap" items="${requestScope.studentMap}">
           <tr><td><input type="textbox" value="${indexMap.key}"></td>
               <td><input type="texbox" value="${resultMap.value}"></td>
                <td>2010</td>
                <td>
                <select name="compnayNames[]"  class="companyNamesClass" multiple="multiple">
                    <option value="Apple">Apple</option>
                    <option value="Google">Goolge</option>
                    <option value="Tata">Tata</option> 
                    <option value="IBM">IBM</option>
                    <option value="Other">Others</option>
              </select>
                </td>
                    <td><input type="textbox"></td> 
            </tr>
        </c:forEach>                                                
        </tbody>

Anyone have any clue , why after adding values(on the fly ) to columns search doesn't work ? — harpal18
– harpal18, Commented Jan 4, 2015 at 7:03
It is a little bit confusing. Where do you insert data dynamically? It looks like a JSP generated table. What columns / data does not work with the dataTables search? — davidkonrad
– davidkonrad, Commented Jan 4, 2015 at 10:14
@davidkonrad , yes i am creating table in jsp page but also calling datatable plugin to get datatable feature activated on my table. — harpal18
– harpal18, Commented Jan 4, 2015 at 10:23
Yes, I am aware of that. But where do you create anything dynamically (JSP is serverside generation) and what columns and which data does not work with the dataTables search? — davidkonrad
– davidkonrad, Commented Jan 4, 2015 at 10:32
@davidkonrad ,sorry if i wasn't clear. In jsp i am iterating through a map and creating a table. But once table gets created and if i type anything for search it doesn't show any results. Opposite to that , if i create table by putting some dummy values in columns instead of iterating through map, everything works fine . — harpal18
– harpal18, Commented Jan 4, 2015 at 10:42

davidkonrad · Accepted Answer · 2015-01-05 12:08:57Z

2

I think you have a problem with your markup somewhere, and then the built-in typedetection fails. jQuery dataTables should automatically recognise the type of the columns, or at least it tries to. Yyou are using <input>s, <select>s and so on, but for some reason the type detection fails. Always remember to do valid markup! You can force the type detection like this (1.10.x notation:

$('#dbResultsTable').DataTable( {    
   ...
   columnDefs: [
       { "type": "html-string", "targets": 0 },
       { "type": "html-string", "targets": 1 } 
       //and so on
    ]
});

Remember DataTable(), not dataTable()! a little demo -> http://jsfiddle.net/azgcbnex/ Hope it helps. If html-string doesnt work, try with html. Please let me know if this answer works, if not I delete it. My answer is a qualified guess, but cannot be sure.

edited Jan 5, 2015 at 12:08

answered Jan 4, 2015 at 20:32

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

harpal18 Over a year ago

perfect solution :) thanks a million . Thanks for jsfiddle example as well :)

davidkonrad Over a year ago

@hpppy18, glad it works - here is a new question / answer targeting the problem when users are editing the input boxes -> stackoverflow.com/questions/27852497/… didnt thought of that when I was answering you.

Collectives™ on Stack Overflow

search is not working in jquery datatables with dynamically populated table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related