使用AJAX在Dynatable列中搜索JSON

我有一個通過ajax調用填充的dynatable。所有顯示都很好。我明白，在Ajax模式下，一切都傳回服務器進行處理，並且我已經有了列分類工作。現在我希望實施基於列的過濾。使用AJAX在Dynatable列中搜索JSON

例如，爲表：

<table id="grid"> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>function</th> 
     </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table>

我希望能夠提交搜索名稱=「富」，只有匹配具有「foo」的名行或搜索功能「foo」，並只匹配該列中匹配的行。

我的JS至今：

jQuery(document).ready(
    function() { 
    var url = '/bar/data'; 
    $('#grid').dynatable({ 
     dataset: { 
      ajax: true, 
      ajaxUrl: url, 
      ajaxOnLoad: true, 
      records: [] 
     } 
    }); 
    } 
);

我願意（雖然我不知道如何）如果有必要讓每個欄標題下的輸入框。另一個想法將是一個選擇元素與您希望搜索的列名稱。我已經完成了測試，但現在問題變成如何讓dynatable.js將url參數設置爲queries[Name]=foo而不是僅僅queries[search]=foo。我重新閱讀了文檔並查看了過濾示例，但我沒有看到如何解決這個問題。（我想，以避免用戶搜索字符串等進入：默認搜索輸入框「名富」）

任何意見或指針將不勝感激......

來源

2014-03-26 Todd

一些反向engeneering後我發現ajaxData

$("#my-table").dynatable({ 
    dataset: { 
    ajax: true, 
    ajaxUrl: "/getFromServer", 
    ajaxOnLoad: true, 
    ajaxData: { 
        caller: myName, 
        debug:  2, 
        county:  countyName 
        }, 
    records: [] 
    }

}）;

ajaxData-Block中的所有內容都被傳遞給服務器。可能會有所幫助。

沃爾特

來源

2014-05-17 19:38:41 wambacher

這確實幫助。它允許我創建一個單獨的div來接受列和過濾器，並基於該輸入刷新dynatable。謝謝。稍後我會發布完整的解決方案... – Todd

@Todd能否發佈解決方案？ – sitilge

對不起，該項目已被放棄，我無法訪問我當時正在編寫的代碼。 – Todd

的upvoted答案是很好，但我覺得更好，更「動態」的方式來做到這將是一個事件觸發器內。

window.addEventListener('load', function() { 

    var dynaTable = $("#dynatable-table"); 
    //you can call your function within the "function (e,data)" 
    // or replace it 
    dynaTable.bind('dynatable:beforeProcess', function (e, data) { 
     console.log("beforeProcess fired",data); 
     var dynaTableData = dynaTable.data('dynatable'); 
     if(!dynaTableData){ 
      ; //not yet loaded 
     }else{ 
      //add aditional ajax params here 
      dynaTableData.settings.dataset["ajaxData"] = { "addedDateTime" : new Date()}; 
     } 
    }); 

    dynaTable.bind('dynatable:afterProcess', function (e, data) { 
     //after adding the additional ajax params you should be able to 
     // see them here 
     console.log("afterProcess fired",data); 
    }); 

    dynaTable.dynatable({ 
     dataset:{ 
      ajax: true, 
      ajaxUrl: appRootUrl + "/projects/getSomeRecords", 
      ajaxOnLoad: true, 
      records: [] 
     }, 
     features:{ 
      pushState : false 
     } 
    });

有時你可能需要強制Dynatable更新，這可以輕鬆完成：

self.forceDynaTableUpdate = function() { 
    var dyna = $('#dynatable-table-sessions').data('dynatable'); 
    if(!dyna){ 
     return; 
    } 
    console.log("dyna setting:",dyna.settings); 

    dyna.process(true); 
};

來源

2018-03-04 01:40:48 Patronaut

使用AJAX在Dynatable列中搜索JSON

回答

相關問題