使用 ajax、jquery 将数据填充到 html 表并使其可搜索答案

【问题标题】：populating data to html table using ajax, jquery and making it searchable使用 ajax、jquery 将数据填充到 html 表并使其可搜索
【发布时间】：2016-01-07 13:56:12
【问题描述】：

我正在将数据动态加载到 html 表中，如下所示。我正在使用 Datatable 进行搜索。

使用的技术栈是：春季MVC 休眠阿贾克斯 jQuery

function getdata()
 {
        $.ajax({

        type: "GET",
         url: "/controllerURL.html", //controller URL
         contentType: "application/json; charset=utf-8",
         dataType: "json",    

         success: function (results) {
            console.log(results)
             var success = results.success;
            if(success){
            var finaldata = "<tbody><thead><tr><th>ID</th><th>data1</th><th>data2</th><th>Update</th></tr></thead>"; //data
            var data = results.message;
                data = jQuery.parseJSON(data);
            alert(data);
                for(var i = 0; i < data.length; i++){
                    var value = data[i];                
                    finaldata = finaldata+  "<tr><th>"+value.ID+"</th><th>"+value.variable1+"</th><th>"+value.variable2+"</th></tr>";
                                                }
                finaldata = finaldata + "</tbody>";
            $("#tableID").html(finaldata);
             }            
         },
         error: function (data) {       
            alert("fail");
         console.log('ajax call error');    

         }
     });
 }

我现在可以将数据加载到表中。但有人可以解释一下如何向它添加搜索选项。

【问题讨论】：

不确定您所说的“搜索选项”是什么意思。您是否正在寻找类似datatables.net
是的。这就是我要找的。它正在使用普通的 HTML 表格。但是，在这个 AJAX 调用之后。搜索不工作
什么search 不起作用？此处未显示与搜索相关的任何内容
$(function () { $ ("#example1").DataTable(); }
您绝对应该将您正在使用数据表的事实添加到您的问题中。要像您尝试那样更新数据表，当您进行 ajax 调用时，您必须使用数据表更新机制。 datatables.net/reference/api/row().data() 或 datatables.net/reference/api/ajax.reload()

标签： javascript jquery html ajax spring-mvc

【解决方案1】：

您可以使用数据表click here

它将为您提供您可能想要集成的各种内置功能

<!--dependencies for data table -->
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>

你的 html 应该是这样的

 <table id="stable" class="display table-responsive table-bordered" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Id</th>
        <th>Data1</th>
        <th>Data2</th>
        <th>Data3</th>
        <th>Data4</th>
    </tr>

</thead>

终于写出这个脚本

$(document).ready(function () {
    $('#table').DataTable();
});

【讨论】：