CODEWITHSUNDEEP
javascriptjquerydatatables
L.Anush
L.Anush

Reputation: 101

How to refresh Datatable values after selecting drop down value in jQuery

According to my requirement i have a dropdown list and when i select a value from the dropdown appropriate data need to be fetch from the database. Dropdown select value sending through jQuery and as Ajax. i have few questions here

  1. Do i really want to refresh datatable to be displayed selected data?

Here are the code snappiest.

Dropdown - 

<select class="filter" id="secquneceDropdownId">
    <option value="" selected>All</option>
    <option value="INSEQUENCE">In Sequence</option>
    <option value="OUTSEQUENCE">Out Sequence</option>
    <option value="RECIPES">Sequence Mapping</option>
</select>

jQuery and Ajax call to send dropdown selected value -

        $(document).ready(function() {
        $("#secquneceDropdownId").change(function() {
            var dropdownSelected = $(this).find(":selected").val()
            var clientID = {
                "isDropdownSelected" : dropdownSelected
            }
            console.log('dropdownSelected value is = ' + dropdownSelected)
            $.ajax({
                type : "POST",
                url : "/IdeaOfThings/listSequences",
                data : JSON.stringify(clientID),
                contentType : 'application/json; charset=utf-8',
                dataType : "json",

                success : function(data) {

                }
            });

        });
    });

Datatable Call for show Data - 

$(document).ready(
    function() {
       var table = $('#example2').DataTable({
            "ordering" : false,
      });
});

Upvotes: 0

Views: 2542

Answers (1)

MyTwoCents
MyTwoCents

Reputation: 7622

I don't see any link between your ajax and datatable.

To answer your question 1.

Yes, you will need to refresh the grid each time on combo change as Data fetched will depend on the option selected.

If you are looking for how to implement it

Here is a Sample

$("#secquneceDropdownId").change(function() {
    loadData();

}); 


function loadData(){
   var dropdownSelected = $("#secquneceDropdownId").val()
    var clientID = {
        "isDropdownSelected" : dropdownSelected
    }  

    $("#tblDeviceDetail").DataTable({
        "columns": [
           { "data": "ip" },
           { "data": "apiPort" },
           { "data": "hostname" }

           ],
           "ajax": {
               "url": "/IdeaOfThings/listSequences",
               data : JSON.stringify(clientID),
               contentType : 'application/json; charset=utf-8',
               dataType : "json",
               "type": "POST",
               "dataSrc": "[]",

           }
       });

   }

assuming your JSON is like this 

[ { "ip" : "sfsdsdfs" , "apiPort" : "322",  "hostname": "sfsdfsdf"}, 
{ "ip" : "5345345" , "apiPort" : "4444",  "hostname": "sadfasds"}]

Upvotes: 1

Related Questions