搜索不能在具有动态填充表的jquery数据表中工作

时间:2015-01-03 09:57:48

标签: jquery twitter-bootstrap jquery-plugins datatables jquery-datatables

即使表格中有数据,我的数据表也没有显示任何搜索结果。我正在使用jquery datatable插件。我正在动态填充一些列的数据,并为用户创建一些列,以便稍后输入一些数据。

我正在使用下面的脚本/样式表

    <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>

1 个答案:

答案 0 :(得分:2)

认为你的某个地方的标记有问题,然后内置的类型检测失败。 jQuery dataTables 应该自动识别列的类型,或者至少它会尝试。你使用<input><select>等等,但由于某种原因,类型检测失败。永远记得做有效的标记!您可以像这样强制进行类型检测(1.10.x表示法:

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

请记住DataTable(),而不是dataTable()!一个小小的演示 - &gt; http://jsfiddle.net/azgcbnex/ 希望有所帮助。如果html-string无效,请尝试使用html。如果这个答案有效,请告诉我,如果没有,我会删除它。我的答案是合格的猜测,但无法确定。