使用ajax，jquery將數據填充到html表中並使其可搜索

Question

我將數據動態加載到html表中，如下所示。 我正在使用數據表進行搜索。

使用的技術棧是：Spring MVC Hibernate Ajax 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');    

         }
     });
 }

現在，我可以將數據加載到表中了。 但有人可以解釋如何向其中添加搜索選項。

Answer 1

您可以使用數據表點擊這里

它將為您提供各種可能要集成的內置功能

<!--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();
});