簡體   English   中英

在jQuery中選擇下拉值后如何刷新數據表值

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

根據我的要求,我有一個下拉列表,當我從下拉列表中選擇一個值時,需要從數據庫中獲取適當的數據。 下拉選擇值通過 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,
      });
});

我沒有看到您的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"}] 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM