Copyright 2024 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Show Nếu bạn chưa biết thì WordPress hiện tại vẫn đang sử dụng jQuery v1.12.4 và jQuery Migrate v1.4.1. Đây có thể xem là 2 phiên bản jQuery khá cũ khi mà jQuery mới nhất đã lên tới v3.3.1. Những phiên bản jQuery này còn tồn tại nhiều lỗi bảo mật nghiêm trọng. Đó là lý do tại sao bạn chắc chắn sẽ bị cảnh báo khi kiểm tra website với Google Lighthouse. Cách duy nhất để khắc phục vấn đề này chính là nâng câp jQuery lên phiên bản mới nhất. Tham khảo thêm:
Tại sao WordPress vẫn sử dụng jQuery phiên bản cũ?Cảnh báo bảo mật của Google Lighthouse đối với jQuery v1.12.4:  Mặc dù bị cảnh báo là còn tồn tại nhiều lỗi bảo mật. Tuy nhiên, tới thời điểm này, WordPress vẫn “trung thành” với jQuery v1.12.4 và jQuery Migrate v1.4.1 có lẽ là do rất nhiều theme, plugin hiện nay vẫn đang hoạt động dựa trên chúng. Việc nâng cấp jQuery lên phiên bản cao hơn sẽ khiến những theme và plugin này bị lỗi. Vì vậy, bạn phải chắc chắn những theme và plugin mà mình đang sử dụng không yêu cầu jQuery phiên bản cũ trước khi tiến hành nâng cấp. Trong WordPress, các bạn hoàn toàn có thể làm điều này một cách dễ dàng nhờ một plugin có tên là jQuery Updater. Tất cả những gì các bạn cần làm là cài đặt và kích hoạt nó. Sau đó, xóa cache web và cache trình duyệt (nếu có) rồi kiểm tra kết quả thông qua Chrome Developer Tools (bấm tổ hợp phím Trong trường hợp website gặp các vấn đề liên quan đến jQuery sau khi nâng cấp, các bạn chỉ cần vô hiệu hóa plugin jQuery Updater rồi xóa nó đi là được. Website sẽ tự động quay trở về phiên bản jQuery mặc định của WordPress. Thật đơn giản phải không nào? Chúc các bạn thành công! Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :) Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé. DataTables là một jQuery Plugin rất nổi tiếng và được rất nhiều các dev sử dụng trong dự án, tích hợp phân trang, tìm kiếm nhanh, download các định dạng file PDF, XLSX, CSV…mang lại trải nhiệm người dùng rất tuyệt vời. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng DataTables. DataTables – jQuery Plugin quản lý table tuyệt hảoDataTables cung cấp cho người dùng rất nhiều UI đẹp để tùy biến giao diện, trong bài này mình sẽ tích hợp Bootstrap 3 cho nó gần gũi và đơn giản mà lại đẹp, các bạn có thể tham khảo thêm các UI khác tại đây Bước 1Các bạn sẽ chèn các file css và js cần thiết vào project <head> <meta charset\="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo Select2 jQuery - aduka.asia</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" /> <script src\="https://code.jquery.com/jquery-3.3.1.min.js"\></script> <script src\="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"\></script> <script src\="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"\></script> </head> Bước 2Tạo table với khối dữ liệu như sau, khi làm việc vs MySQL và PHP thì các bạn sẽ lấy dữ liệu từ Database ra và foreach ra bên ngoài, trong phạm vi bài viết này mình sẽ demo như sau 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 <table id\="example" class\="table table-striped table-bordered" cellspacing\="0" width\="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> <tr> <td>Jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> </tr> <tr> <td>Quinn Flynn</td> <td>Support Lead</td> <td>Edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$342,000</td> </tr> <tr> <td>Charde Marshall</td> <td>Regional Director</td> <td>San Francisco</td> <td>36</td> <td>2008/10/16</td> <td>$470,600</td> </tr> <tr> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td>London</td> <td>43</td> <td>2012/12/18</td> <td>$313,500</td> </tr> <tr> <td>Michael Silva</td> <td>Marketing Designer</td> <td>London</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> </tr> <tr> <td>Paul Byrd</td> <td>Chief Financial Officer (CFO)</td> <td>New York</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> </tr> <tr> <td>Gloria Little</td> <td>Systems Administrator</td> <td>New York</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> </tr> <tr> <td>Gavin Joyce</td> <td>Developer</td> <td>Edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$92,575</td> </tr> <tr> <td>Jennifer Chang</td> <td>Regional Director</td> <td>Singapore</td> <td>28</td> <td>2010/11/14</td> <td>$357,650</td> </tr> <tr> <td>Brenden Wagner</td> <td>Software Engineer</td> <td>San Francisco</td> <td>28</td> <td>2011/06/07</td> <td>$206,850</td> </tr> <tr> <td>Fiona Green</td> <td>Chief Operating Officer (COO)</td> <td>San Francisco</td> <td>48</td> <td>2010/03/11</td> <td>$850,000</td> </tr> <tr> <td>Martena Mccray</td> <td>Post-Sales support</td> <td>Edinburgh</td> <td>46</td> <td>2011/03/09</td> <td>$324,050</td> </tr> <tr> <td>Unity Butler</td> <td>Marketing Designer</td> <td>San Francisco</td> <td>47</td> <td>2009/12/09</td> <td>$85,675</td> </tr> <tr> <td>Howard Hatfield</td> <td>Office Manager</td> <td>San Francisco</td> <td>51</td> <td>2008/12/16</td> <td>$164,500</td> </tr> <tr> <td>Hope Fuentes</td> <td>Secretary</td> <td>San Francisco</td> <td>41</td> <td>2010/02/12</td> <td>$109,850</td> </tr> <tr> <td>Vivian Harrell</td> <td>Financial Controller</td> <td>San Francisco</td> <td>62</td> <td>2009/02/14</td> <td>$452,500</td> </tr> <tr> <td>Sakura Yamamoto</td> <td>Support Engineer</td> <td>Tokyo</td> <td>37</td> <td>2009/08/19</td> <td>$139,575</td> </tr> <tr> <td>Thor Walton</td> <td>Developer</td> <td>New York</td> <td>61</td> <td>2013/08/11</td> <td>$98,540</td> </tr> <tr> <td>Finn Camacho</td> <td>Support Engineer</td> <td>San Francisco</td> <td>47</td> <td>2009/07/07</td> <td>$87,500</td> </tr> <tr> <td>Serge Baldwin</td> <td>Data Coordinator</td> <td>Singapore</td> <td>64</td> <td>2012/04/09</td> <td>$138,575</td> </tr> <tr> <td>Zenaida Frank</td> <td>Software Engineer</td> <td>New York</td> <td>63</td> <td>2010/01/04</td> <td>$125,250</td> </tr> <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> Bảng trên có id\="example" và đoạn script để gọi plugin ra như sau <script> $(document).ready(function() { $(' example').DataTable();}); </script> Vậy là xong rồi đó, chúng ta cùng mở thành quả ra xem nhé. Với các phần như vùng khoanh đỏ trong hình, các bạn có thể thay đổi bằng cách mở file jquery.dataTables.min.js ra và chỉnh sửa ở trong đó. Bonus : tích hợp thêm các button download định dạng PDF, XLSX, CSV, PRINT…Chèn các file css và js cần thiết <link href\="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" /> <script src\="https://code.jquery.com/jquery-3.3.1.min.js"\></script> <script src\="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"\></script> <script src\="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"\></script> <script src\="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"\></script> <script src\="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"\></script> <script src\="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"\></script> <script src\="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"\></script> <script src\="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"\></script> <script src\="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"\></script> <script src\="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"\></script> Bảng table vẫn dữ nguyên như bên trên, đoạn script bây giờ sẽ thêm các thuộc tính sau <script> $(document).ready(function() { $(' example').DataTable({dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] }); }); </script> Các bạn hãy F5 để xem kết quả nhé . Vậy là chúng ta đã làm thành công rồi đó, hãy click vào một button nào đó và nó sẽ down file xuống. Trên trang chủ của Data Tables còn rất rất nhiều thứ mà mình cũng chưa tìm hiểu hết được, các bạn có thể tham khảo tại : Trang chủ Cảm ơn các bạn đã theo dõi bài viết của mình, mọi thắc mắc các bạn hãy comment tại bài viết này mình sẽ support. Thank all ! |
