在jQuery中选择下拉值后如何刷新数据表值

时间:2018-11-13 04:34:10

标签: javascript jquery datatables

根据我的要求,我有一个下拉列表,当我从下拉列表中选择一个值时,需要从数据库中获取适当的数据。下拉选择值通过jQuery和Ajax发送。我在这里有几个问题

  1. 我真的要刷新数据表以显示所选数据吗?

这是最简练的代码。

下拉菜单-

<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和Ajax调用以发送下拉选择的值-

        $(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) {

                }
            });

        });
    });

数据表调用显示数据-

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

1 个答案:

答案 0 :(得分:1)

我看不到您的ajaxdatatable之间的任何链接。

回答您的问题1.

是的,每次组合更改时都需要刷新网格,因为获取的数据将取决于所选的选项。

如果您正在寻找实现方法

这是一个样本

$("#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": "[]",

           }
       });

   }

假设您的JSON是这样

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