iT邦幫忙

0

求教:在 jQuery DataTable 想加按鍵代替打字入 Search 功能!

  • 分享至 

  • xImage

想加按鍵代替打字 Search,但不懂太過複雜的做法,原 jQuery DataTable 網站很不想簡單解決這玩法。我就想,用簡單設定是否能將 按鍵值掉入 DataTable 的 Search 內,但發覺它沒有 ID name,我就不懂怎樣做了!
https://ithelp.ithome.com.tw/upload/images/20220206/20137719Uyn4ukab1U.png
現在製作的網站,主要是利用 jQuery DataTable 來程現各類資料,這裡是引用別人的 Example 圖片,而我的目標也和圖片一樣。
https://ithelp.ithome.com.tw/upload/images/20220206/20137719KKMppONZ8h.png

https://ithelp.ithome.com.tw/upload/images/20220206/20137719wGYzaC59qH.png
用簡單預設字眼來代替打字!
設定使用:

  • jQuery v1.11.3 ( js )
  • DataTables 1.10.23 ( js & css )

希望各位能教我簡單作法!
(申報:本人只是編程初入門(但就快退休),學習用在個人網站上,將來想在貧困地方教育小朋友,當作課外學習新知。)

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
camabula
iT邦新手 3 級 ‧ 2022-02-07 08:44:39

剛好最近開始研究jQuery
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table
把該程式新增一些碼似乎可以達到你的要求,不過本人只是新手,應該有更好的方法吧!

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
  $("#H").click(function() {
    var value = "h";
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });  
  $("#D").click(function() {
    var value = "d";
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });  
  $("#S").click(function() {
    var value = "s";
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  }); 
  $("#All").click(function() {
    $("#myTable tr").filter(function() {
      $(this).show();
    });
  });    
});
</script>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>  
<button id="All">All</button>
<button id="D">D</button>
<button id="H">H</button>
<button id="S">S</button>
<input id="myInput" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>a_r@test.com</td>
  </tr>
  </tbody>
</table>
  
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</body>
</html>

https://codepen.io/camabula/pen/wvPoQwa

看更多先前的回應...收起先前的回應...
MoMoDIYer iT邦新手 5 級 ‧ 2022-02-07 21:12:18 檢舉

你的做法很好,但我的jQuery版本不同,不能直接套用,要慢慢研究一吓!

camabula iT邦新手 3 級 ‧ 2022-02-08 10:03:17 檢舉
MoMoDIYer iT邦新手 5 級 ‧ 2022-04-01 14:42:51 檢舉

我想分離資料不在 .html 檔內。
而資料結構為這種型式,可以嗎?

// data.js
const data = [
    [
    "John",
    "Doe",
    "john@example.com",
    ],
    [
    "Mary",
    "Moe",
    "mary@mail.com",
    ],
    [
    "July",
    "Dooley",
    "july@greatstuff.com",
    ],
    [
    "Anja",
    "Ravendale",
    "a_r@test.com",
    ],
]

那樣應該怎樣修改?
可以在 codepen.io 再展示嗎?

camabula iT邦新手 3 級 ‧ 2022-04-11 08:53:51 檢舉

存取資料是後端行為,有對應的後端程式語言,存取完之後就會放到html裡面交由瀏覽器顯示,所以你的問題變成了後端存取了。


CodePen是網頁前端的展示平台,所以無法展現。


你可以參考一下DataTable有關DataSourec這個章節的說明

MoMoDIYer iT邦新手 5 級 ‧ 2022-04-13 09:22:00 檢舉

非常感謝你的回應,感覺自己似是使用"Javascript sourced data"類別的玩法,張資料分拆到JS檔去,是為了方便管理資料,更不用經常打開HTML檔,免得意外修改了HTML檔而難以找問題所在!
就是不明白自己錯在那裡,又或是應用Datatables的限制,才遲遲改善不了自己的網誌!

camabula iT邦新手 3 級 ‧ 2022-04-13 10:30:37 檢舉

如果你沒有要用到資料庫伺服器,只是把資料放在一個獨立的檔案中的話,那就用JavaScript把資料轉換成HTML的Table操作即可。


CodePen範例

MoMoDIYer iT邦新手 5 級 ‧ 2022-04-13 15:13:23 檢舉

另外,早前你給的Example,發覺有個問題,按鍵filter,只是對當前版面的資料數量作過濾。所以你的example在data數量多時,也不會使用分頁。
想問,你的example可以改善以上問題嗎?想有正常的分頁功能,及按鍵是過濾整體資料的!
謝謝!

MoMoDIYer iT邦新手 5 級 ‧ 2022-04-13 16:04:08 檢舉

2022-04-13 10:30:37 的回覆 我見CodePen是正常,但我整理出來後,又不知錯在那裡,就是不能增加資料?

MoMoDIYer iT邦新手 5 級 ‧ 2022-04-13 16:30:00 檢舉

因為某些資料,如零件資料,會超過數千個資料,不可一次過顯示出來,會很慢的顯示,也沒這種必要,實在令人眼花!所以,才想用最基本的dataTables 功能,但包括按鍵以代替打字。

camabula iT邦新手 3 級 ‧ 2022-04-13 20:47:49 檢舉

jQuery Filterable Table3
上面的codepen範例供你參考。


不過datatable是先產出表格,filter button是後來的動作,你會發現在某一頁時,按下filter button是以該頁資料做比對,並不是列出所有符合的資料;另外,你會發現按下filter button的時,表頭的Firsname、Lastname、Email這個row會消失不見。但是我只能幫到這兒了,剩下的就交給你自己去想了。

MoMoDIYer iT邦新手 5 級 ‧ 2022-04-14 21:07:54 檢舉

好多謝你的回應,我會繼續努力學習,希望能盡早學到所需,你的意見會成為我的動力,希望在將來也得到你的提點!

我要發表回答

立即登入回答