搜索在动态填充 table 的 jquery 数据 table 中不起作用

Question

我的数据table 没有显示任何搜索结果，尽管 table 中有数据。我正在使用 jquery datatable 插件。我正在动态填充一些列的数据并创建一些列供用户稍后输入一些数据。

我在下面使用 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>

Answer 1

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

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

记住DataTable()，而不是dataTable()！一个小演示 -> http://jsfiddle.net/azgcbnex/ 希望对您有所帮助。如果 html-string 不起作用，请尝试使用 html。请让我知道这个答案是否有效，否则我将其删除。我的回答是有条件的猜测，但不能确定。

搜索在动态填充 table 的 jquery 数据 table 中不起作用

search is not working in jquery datatables with dynamically populated table

jquery

jquery-plugins

datatables

twitter-bootstrap

jquery-datatables