Phoenix - 使用數據表的站點範圍搜索功能

我正在開發一個Phoenix網絡應用程序，並試圖找出一種方法來實現位於導航欄中的全局搜索框，該全局搜索框將指向並執行搜索在用DataTables構建的位於/users的桌子上。就像我現在所做的那樣，當我通過搜索欄提交搜索時，它會重定向到/users，但不會將搜索應用於表格。Phoenix - 使用數據表的站點範圍搜索功能

app.html.eex（佈局）：

<form id="custom-search-input" class="nav navbar-nav pull-right" action="/users"> 
    <div class="input-group"> 
    <input id="ee-search" type="text" name="search" class="form-control" placeholder="Employee Search" /> 
    <span class="input-group-btn"> 
     <button class="btn btn-info"> 
     <i class="fa fa-search"></i> 
     </button> 
    </span> 
    </div> 
</form>

app.js：

$(document).ready(function() { 
    $('#employeeTable').DataTable(); 
}); 

var table = $('#employeeTable').DataTable({ 
    "lengthMenu": [ [15, 50, 75, 150, -1], [15, 50, 75, 150, "All"] ] 
});

我發現這個在數據表API我已經放置在app.js：

$('#ee-search').on('keyup', function() { 
    table.search(this.value).draw(); 
});

我提前道歉......我的JavaScript技能實際上並不存在。如何獲得搜索輸入以應用於DataTable？我假設有一種方法來鏈接表單提交/ JavaScript代碼/數據表？如果您需要更多信息或代碼，請告訴我。謝謝！

來源

2016-07-22 jsonkenl

如果你在'keyup'處理程序可以看到它的地方定義它，你應該能夠引用你的'table'變量。您可能希望在您的table.search行上放置一個斷點並評估表以查看它是否未定義。根據我的經驗，學習javascript在一定程度上是查找語法的一部分，部分是在DOM對象中漫步以查看真正存在的內容。 – BobRodes

也許我最後一個帖子沒有清楚地理解你的問題。用戶輸入的搜索框是否與顯示過濾結果的表不同？ – BobRodes

@BobRodes yes搜索框位於靜態導航欄上，可以從任何地方訪問。 '/ users'頁面基本上是一個員工目錄，我試圖讓它可以從網站的任何地方訪問。 – jsonkenl

有三種方法可以將數據從一個頁面傳遞到另一個頁面，而無需往返服務器：在本地存儲中獲取數據，Cookie和會話變量。其中，我將首先使用GET數據。

因此，請閱讀this question（這是許多的一個示例），並解釋瞭如何使用GET機制將數據從一個頁面傳遞到另一個頁面。基本上，您必須將method="GET"添加到表單的屬性中，然後從\users頁面解析得到的查詢字符串。

然後，執行搜索，只需調用search()方法，通過你的解析字符串作爲參數，並調用draw()方法，所以：

myTable.search(myTextString).draw();

的數據表將應用搜索詞，篩選結果並重繪表格。

來源

2016-07-23 17:28:49 BobRodes

感謝您的幫助！我已經知道它在何處解析GET params並將其作爲'/ users'頁面上的搜索框的值輸入，但是它不提交搜索。是否有一些額外的代碼需要添加到實際提交搜索的jQuery中？我試圖添加.submit（），但似乎沒有工作。 – jsonkenl

您需要使用'filter（）'方法來應用搜索條件。對不起，我錯過了，天真地認爲只是插入文本將應用過濾器。編輯我的帖子。 – BobRodes

我用'filter（）'看到了你要去的地方，然而'search（）'方法提供了我正在尋找的結果。我更新了你的答案以反映這一點。再次感謝您的幫助！ – jsonkenl

Phoenix - 使用數據表的站點範圍搜索功能

回答

相關問題