使用ajax，jquery将数据填充到html表中并使其可搜索

Question

I'm loading data dynamically to html table as below. I'm using Datatable for ssearch.

Technology stack used is: 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');    

         }
     });
 }

I'm now be able to load data into table. but can someone explain how to add search option to it.

Answer 1

You can use datatables click here

It will provide you various inbuilt functionality that you may want to integrate

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

Your html should look like this

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

finally write this script

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