CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-pluginsdatatables
harpal18
harpal18

Reputation: 135

search is not working in jquery datatables with dynamically populated table

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>

Upvotes: 0

Views: 5032

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

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.

Upvotes: 2

Related Questions