2015-11-02 66 views
1

將tableSorter的v 2.0.5與tablesorterPager插件一起使用。我使用ajax加載錶行(使用文檔中的初始配置,並對ajax進行了細微更改URL以滿足我的需求)。一切都很好。tablesorterPager插件:如何與其他控件集成

我想要做的是將tablesorterPager的過濾器函數與其他HTML控件集成在一起。具體來說,我的應用程序處理工作訂單。訂單的狀態可能是「打開」或「關閉」。我想使用單選按鈕(或選擇,或其他)來允許用戶在「打開,關閉,任何」之間進行選擇,並且在進行選擇時刷新頁面,並且我想保留任何過濾/在表格顯示中對用戶進行排序。

例如,假設用戶在其中一個表列的過濾器框中鍵入世界「foo」,並選擇按日期排序。爲了這個例子的目的,假設狀態控制被設置爲「任何」。用戶決定將結果限制爲「打開」項目。當他點擊更改控件時,我希望插件發出ajax請求,幷包含「foo」過濾器(來自表列中的過濾器框)和狀態控件(即「打開」)的選擇並保留已由用戶選擇的排序選項。

有人能指出我如何操縱/更新ajax URL以包含其他控件的過濾器選擇的正確方向嗎?還是有一些其他技術來完成這個?

謝謝, 唐

+0

也許會更容易,如果你想我的[的tablesorter的叉(HTTP://mottie.github .io/tablesorter/docs/example-pager-ajax.html)...該尋呼機已經構建在ajax中,並與過濾器小部件集成在一起。 – Mottie

+0

@Mottie,其實我正在使用你的forkorter。我應該更具體。你能建議我如何將其他控件與尋呼機集成嗎? 想象一下,如果我有一個過濾/排序選項設置表。想象一下用戶點擊一個按鈕控件。對於click事件,我想更改傳呼機發送給我的服務器應用程序的查詢字符串。具體來說,我想添加諸如「&Status = all」之類的內容。 建議? –

+0

好的,我希望這不是一個愚蠢的問題。如何在更新控件後重新加載表格數據(使用Ajax調用)? 我知道,如果我有點作出改變,以控制後列,我得到我期待的迴應。 問題是,我想要觸發該更新而不必進行排序。 我嘗試使用jQuery Ajax調用來更新tbody。這有效,但當然這不會與傳呼機結合。 我試過(如下所述:http://stackoverflow.com/questions/17795507/tablesort-reload-table-data-on-click-using-ajax)所有功能的更新。沒有運氣。 幫助?謝謝! –

回答

0

a demo展示瞭如何使用自定義分頁控件尋呼機。實際上,this SO answer顯示瞭如何將該尋呼機與另一個第三方分頁插件一起使用。

至於添加更多的信息,網址,您可以修改傳遞給jQuery的$.ajax調用(ref)的ajaxObject

ajaxObject: { 
    // add ajax settings here 
    dataType: 'json', 
    data: { 
    'Status' : 'all' 
    } 
}, 

或者使用customAjaxUrl callback function修改URL。

// modify the url after all processing has been applied 
customAjaxUrl: function(table, url) { 
    return url += '&Status=all'; 
} 
0

感謝Mottie的幫助。根據你的建議,這是我做的解決我遇到的問題。

這很簡單:分揀機的customAjaxUrl回調函數可以添加任何你想要的AjaxUrl,包括頁面上控件的值。

例如,我有一個名爲CustomerID的輸入。我想要這個值包括

customAjaxUrl: function (table, url) { 

     // manipulate the url string as you desire 
     // url += '&currPage=' + window.location.pathname; 

     // Append "CustomerID=" to the query string, 
     // and use '$("#CustomerID").val()' to obtain 
     // the value of the CustomerID selection. 

     url += '&CustomerID=' + $("#CustomerID").val(); 

     // trigger a custom event; if you want 
     $(table).trigger('changingUrl', url); 
     // send the server the current page 
     return url; 

我可以添加其他項目查詢字符串,從其他控件讀取值。

請注意,您可能想要觸發表的更新。例如,在我的項目中,用戶有一個複選框控件,用於確定是否包含特定狀態的故障單。當它被選中時,我想要刷新表格,同時保留所有現有的過濾器和排序。

你可以用pager插件的pagerUpdate方法來做到這一點。我把觸發器的功能裏面,因此它可以被稱爲的onclick /多個控件onchange事件處理程序:

function doTableReresh(){ 
    $("#mytable").trigger("pagerUpdate"); 
}