- \n
- [jQuery] jQuery DataTables \u8cc7\u6599\u884c\u52a0\u5165checkbox\u3001\u6309\u9215\uff0c\u95dc\u9589\u8cc7\u6599\u884c\u6392\u5e8f\u3001\u6539\u8b8a\u4e0b\u62c9\u9078\u55ae\u7684\u6bcf\u9801\u986f\u793a\u5e7e\u7b46\u3001\u8b8a\u66f4DataTables\u6a23\u5f0f\u2026\u7b49\u529f\u80fd Part5 final | \u9ad8\u7d1a\u6253\u5b57\u54e1\u7684\u6280\u8853\u96f2 - \u9ede\u90e8\u843d (dotblogs.com.tw)<\/a><\/li>\n
- \u7b2c11\u8eca\u5ec2-table\u754c\u7684\u795e\u5668!DataTables\u4ecb\u7d39\u7bc7(1) - iT \u90a6\u5e6b\u5fd9::\u4e00\u8d77\u5e6b\u5fd9\u89e3\u6c7a\u96e3\u984c\uff0c\u62ef\u6551 IT \u4eba\u7684\u4e00\u5929 (ithome.com.tw)<\/a><\/li>\n<\/ul>\n
--<\/p>\n
\u5b89\u88dd<\/h2>\n
- \n
- https:\/\/datatables.net\/download\/<\/a><\/li>\n<\/ul>\n
\u5982\u679c\u6709\u4f7f\u7528 Bootstrap\uff0cframework \u52d9\u5fc5\u8981\u9078\u64c7<\/p>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2022\/09\/20220906_172226.png\")
<\/p>\n--<\/p>\n
\u4e2d\u6587\u5316<\/h2>\n
- \n
- DataTables example - Language options<\/a><\/li>\n
- DataTables example - Remote language file<\/a><\/li>\n
- Internationalisation plug-ins (datatables.net)<\/a><\/li>\n<\/ul>\n
\u4f7f\u7528 url \u65b9\u5f0f<\/p>\n
language: {\r\n url: '\/\/cdn.datatables.net\/plug-ins\/1.12.1\/i18n\/zh-HANT.json'\r\n},<\/pre>\nJavaScript<\/p>\n
$dataTable_zh = {\"processing\":\"\u8655\u7406\u4e2d...\",\"loadingRecords\":\"\u8f09\u5165\u4e2d...\",\"lengthMenu\":\"\u986f\u793a_MENU_\u9805\u7d50\u679c\",\"info\":\"\u986f\u793a\u7b2c_START_\u81f3_END_\u9805\u7d50\u679c\uff0c\u5171_TOTAL_\u9805\",\"infoEmpty\":\"\u986f\u793a\u7b2c0\u81f30\u9805\u7d50\u679c\uff0c\u51710\u9805\",\"infoFiltered\":\"(\u5f9e_MAX_\u9805\u7d50\u679c\u4e2d\u904e\u6ffe)\",\"search\":\"\u641c\u5c0b:\",\"paginate\":{\"first\":\"\u7b2c\u4e00\u9801\",\"previous\":\"\u4e0a\u4e00\u9801\",\"next\":\"\u4e0b\u4e00\u9801\",\"last\":\"\u6700\u5f8c\u4e00\u9801\"},\"aria\":{\"sortAscending\":\":\u5347\u51aa\u6392\u5217\",\"sortDescending\":\":\u964d\u51aa\u6392\u5217\"},\"emptyTable\":\"\u76ee\u524d\u6c92\u6709\u8cc7\u6599\",\"datetime\":{\"previous\":\"\u4e0a\u4e00\u9801\",\"next\":\"\u4e0b\u4e00\u9801\",\"hours\":\"\u6642\",\"minutes\":\"\u5206\",\"seconds\":\"\u79d2\",\"amPm\":[\"\u4e0a\u5348\",\"\u4e0b\u5348\"],\"unknown\":\"\u672a\u77e5\",\"weekdays\":[\"\u9031\u65e5\",\"\u9031\u4e00\",\"\u9031\u4e8c\",\"\u9031\u4e09\",\"\u9031\u56db\",\"\u9031\u4e94\",\"\u9031\u516d\"],\"months\":[\"\u4e00\u6708\",\"\u4e8c\u6708\",\"\u4e09\u6708\",\"\u56db\u6708\",\"\u4e94\u6708\",\"\u516d\u6708\",\"\u4e03\u6708\",\"\u516b\u6708\",\"\u4e5d\u6708\",\"\u5341\u6708\",\"\u5341\u4e00\u6708\",\"\u5341\u4e8c\u6708\"]},\"searchBuilder\":{\"add\":\"\u65b0\u589e\u689d\u4ef6\",\"condition\":\"\u689d\u4ef6\",\"deleteTitle\":\"\u522a\u9664\u904e\u6ffe\u689d\u4ef6\",\"button\":{\"_\":\"\u8907\u5408\u67e5\u8a62(%d)\",\"0\":\"\u8907\u5408\u67e5\u8a62\"},\"clearAll\":\"\u6e05\u7a7a\",\"conditions\":{\"array\":{\"contains\":\"\u542b\u6709\",\"equals\":\"\u7b49\u65bc\",\"empty\":\"\u7a7a\u503c\",\"not\":\"\u4e0d\u7b49\u65bc\",\"notEmpty\":\"\u975e\u7a7a\u503c\",\"without\":\"\u4e0d\u542b\"},\"date\":{\"after\":\"\u5927\u65bc\",\"before\":\"\u5c0f\u65bc\",\"between\":\"\u5728\u5176\u4e2d\",\"empty\":\"\u70ba\u7a7a\",\"equals\":\"\u7b49\u65bc\",\"not\":\"\u4e0d\u70ba\",\"notBetween\":\"\u4e0d\u5728\u5176\u4e2d\",\"notEmpty\":\"\u4e0d\u70ba\u7a7a\"},\"number\":{\"between\":\"\u5728\u5176\u4e2d\",\"empty\":\"\u70ba\u7a7a\",\"equals\":\"\u7b49\u65bc\",\"gt\":\"\u5927\u65bc\",\"gte\":\"\u5927\u65bc\u7b49\u65bc\",\"lt\":\"\u5c0f\u65bc\",\"lte\":\"\u5c0f\u65bc\u7b49\u65bc\",\"not\":\"\u4e0d\u70ba\",\"notBetween\":\"\u4e0d\u5728\u5176\u4e2d\",\"notEmpty\":\"\u4e0d\u70ba\u7a7a\"},\"string\":{\"contains\":\"\u542b\u6709\",\"empty\":\"\u70ba\u7a7a\",\"endsWith\":\"\u5b57\u5c3e\u70ba\",\"equals\":\"\u7b49\u65bc\",\"not\":\"\u4e0d\u70ba\",\"notEmpty\":\"\u4e0d\u70ba\u7a7a\",\"startsWith\":\"\u5b57\u9996\u70ba\",\"notContains\":\"\u4e0d\u542b\",\"notStarts\":\"\u958b\u982d\u4e0d\u662f\",\"notEnds\":\"\u7d50\u5c3e\u4e0d\u662f\"}},\"data\":\"\u6b04\u4f4d\",\"leftTitle\":\"\u7fa4\u7d44\u689d\u4ef6\",\"logicAnd\":\"\u4e14\",\"logicOr\":\"\u6216\",\"rightTitle\":\"\u53d6\u6d88\u7fa4\u7d44\",\"title\":{\"_\":\"\u8907\u5408\u67e5\u8a62(%d)\",\"0\":\"\u8907\u5408\u67e5\u8a62\"},\"value\":\"\u5167\u5bb9\"},\"editor\":{\"close\":\"\u95dc\u9589\",\"create\":{\"button\":\"\u65b0\u589e\",\"title\":\"\u65b0\u589e\u8cc7\u6599\",\"submit\":\"\u9001\u51fa\u65b0\u589e\"},\"remove\":{\"button\":\"\u522a\u9664\",\"title\":\"\u522a\u9664\u8cc7\u6599\",\"submit\":\"\u9001\u51fa\u522a\u9664\",\"confirm\":{\"_\":\"\u60a8\u78ba\u5b9a\u8981\u522a\u9664\u60a8\u6240\u9078\u53d6\u7684%d\u7b46\u8cc7\u6599\u55ce\uff1f\",\"1\":\"\u60a8\u78ba\u5b9a\u8981\u522a\u9664\u60a8\u6240\u9078\u53d6\u76841\u7b46\u8cc7\u6599\u55ce\uff1f\"}},\"error\":{\"system\":\"\u7cfb\u7d71\u767c\u751f\u932f\u8aa4(\u66f4\u591a\u8cc7\u8a0a)\"},\"edit\":{\"button\":\"\u4fee\u6539\",\"title\":\"\u4fee\u6539\u8cc7\u6599\",\"submit\":\"\u9001\u51fa\u4fee\u6539\"},\"multi\":{\"title\":\"\u591a\u91cd\u503c\",\"info\":\"\u60a8\u6240\u9078\u64c7\u7684\u591a\u7b46\u8cc7\u6599\u4e2d\uff0c\u6b64\u6b04\u4f4d\u5305\u542b\u4e86\u4e0d\u540c\u7684\u503c\u3002\u82e5\u60a8\u60f3\u8981\u5c07\u5b83\u5011\u90fd\u6539\u70ba\u540c\u4e00\u500b\u503c\uff0c\u53ef\u4ee5\u5728\u6b64\u8f38\u5165\uff0c\u8981\u4e0d\u7136\u5b83\u5011\u6703\u4fdd\u7559\u5404\u81ea\u539f\u672c\u7684\u503c\u3002\",\"restore\":\"\u5fa9\u539f\",\"noMulti\":\"\u6b64\u8f38\u5165\u6b04\u9700\u55ae\u7368\u8f38\u5165\uff0c\u4e0d\u5bb9\u8a31\u591a\u7b46\u8cc7\u6599\u4e00\u8d77\u4fee\u6539\"}},\"autoFill\":{\"cancel\":\"\u53d6\u6d88\"},\"buttons\":{\"copySuccess\":{\"_\":\"\u8907\u88fd\u4e86%d\u7b46\u8cc7\u6599\",\"1\":\"\u8907\u88fd\u4e861\u7b46\u8cc7\u6599\"},\"copyTitle\":\"\u5df2\u7d93\u8907\u88fd\u5230\u526a\u8cbc\u7c3f\",\"excel\":\"Excel\",\"pdf\":\"PDF\",\"print\":\"\u5217\u5370\",\"copy\":\"\u8907\u88fd\"},\"searchPanes\":{\"collapse\":{\"_\":\"\u641c\u5c0b\u9762\u7248(%d)\",\"0\":\"\u641c\u5c0b\u9762\u7248\"},\"emptyPanes\":\"\u6c92\u641c\u5c0b\u9762\u7248\",\"loadMessage\":\"\u8f09\u5165\u641c\u5c0b\u9762\u7248\u4e2d...\",\"clearMessage\":\"\u6e05\u7a7a\"},\"stateRestore\":{\"emptyError\":\"\u540d\u7a31\u4e0d\u80fd\u7a7a\u767d\u3002\"},\"select\":{\"columns\":{\"_\":\"\u9078\u64c7\u4e86%d\u6b04\u8cc7\u6599\"},\"rows\":{\"1\":\"\u9078\u64c7\u4e861\u7b46\u8cc7\u6599\",\"_\":\"\u9078\u64c7\u4e86%d\u7b46\u8cc7\u6599\"}},\"zeroRecords\":\"\u6c92\u6709\u7b26\u5408\u7684\u8cc7\u6599\"};\r\n\r\n$('#example').DataTable( {\r\n \"language\": $dataTable_zh\r\n} );<\/pre>\n--<\/p>\n
\u56fa\u5b9a\u8868\u982d<\/h2>\n
- \n
- DataTables example - Left and right fixed columns<\/a><\/li>\n<\/ul>\n
<link rel=\"stylesheet\" href=\"\/\/cdn.datatables.net\/1.12.1\/css\/jquery.dataTables.min.css\">\r\n <script src=\"\/\/cdn.datatables.net\/1.12.1\/js\/jquery.dataTables.min.js\"><\/script>\r\n <script src=\"\/\/cdn.datatables.net\/fixedcolumns\/4.1.0\/js\/dataTables.fixedColumns.min.js\"><\/script><\/pre>\n
<\/p>\n
$('#qtable').DataTable({\r\n scrollX: true,\r\n scrollY: window.innerHeight - 200,\r\n scrollCollapse: true,\r\n paging: false,\r\n bInfo: false,\r\n ordering: false,\r\n fixedColumns: {\r\n left: 1,\r\n }\r\n});<\/pre>\n- \n
- scrollY: window.innerHeight - 200 \u4f7f\u7528\u8996\u7a97\u9ad8\u5ea6\u8abf\u6574\u9ad8\u5ea6<\/li>\n
- bInfo: false \u95dc\u9589\u5e95\u4e0b show \u986f\u793a<\/li>\n
- ordering: false \u95dc\u9589\u6392\u5e8f\u529f\u80fd<\/li>\n<\/ul>\n
--<\/p>\n
\u6307\u5b9a\u53ef\u6392\u5e8f\u6b04\u4f4d<\/h2>\n
\u7de8\u865f\u4e0d\u80fd\u6392\u5e8f\uff0c\u59d3\u540d\u53ef\u4ee5<\/p>\n
<table id=\"table_1\" class=\"table table-striped table-hover\" style=\"border-collapse: collapse; width: 100% !important;\">\r\n <thead>\r\n <tr>\r\n <th class=\"no-sort\">\u7de8\u865f<\/th>\r\n <th>\u59d3\u540d<\/th>\r\n <\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <\/tbody>\r\n<\/table><\/pre>\n
JavsScript \u8a2d\u5b9a<\/p>\n
$('#table_1').DataTable({\r\n searching: false,\r\n scrollX: true,\r\n scrollY: window.innerHeight - 260,\r\n scrollCollapse: true,\r\n paging: false,\r\n bInfo: false,\r\n ordering: true,\r\n columnDefs: [{\r\n orderable: false,\r\n targets: \"no-sort\"\r\n }]\r\n});<\/pre>\n--<\/p>\n
\u5206\u9801\u63a7\u5236<\/h2>\n
paging: false, \/\/ \u662f\u5426\u986f\u793a\uff0c\u4e0b\u62c9\u9078\u64c7\u53ca\u5206\u9801\u5217\r\ndisplayLength: 25, \/\/ \u9810\u8a2d\u6bcf\u9801\u7b46\u6578\r\nlengthChange: false, \/\/ \u5206\u9801\u4e0b\u62c9\u986f\u793a\r\n<\/pre>\n
- \n
- How to Build a Custom Pagination Component in React (freecodecamp.org)<\/a><\/li>\n<\/ul>\n
\u9019\u88e1\u6709\u81ea\u8a02 siblingCount \u7684\u7bc4\u4f8b\uff0c\u6211\u770b\u4e0d\u61c2\u6211\u4e0d\u6703 ...<\/p>\n
--<\/p>\n
info \u986f\u793a<\/h2>\n
- \n
- DataTables example - Multiple table control elements<\/a><\/li>\n<\/ul>\n
\u9810\u8a2d<\/p>\n
$('#example').dataTable( {\r\n \"dom\": 'lrtip'\r\n} );<\/pre>\n\u4e0a\u4e0b\u90fd\u6709<\/p>\n
$('#example').dataTable( {\r\n dom: '<\"top\"iflp<\"clear\">>rt<\"bottom\"iflp<\"clear\">>'\r\n} );<\/pre>\n\u5c07\u7b46\u6578\u79fb\u5230\u4e0a\u65b9<\/p>\n
$('#example').dataTable( {\r\n \"dom\": '<\"top\"i>rt<\"bottom\"flp><\"clear\">'\r\n} );<\/pre>\n--<\/p>\n
\u91cd\u8907\u4f7f\u7528<\/h2>\n
\u5982\u679c\u4f7f\u7528\u4e86 ajax \u5c31\u6703\u91cd\u8907\u4f7f\u7528 .DataTable()\uff0c\u9019\u6642\u5c31\u5fc5\u9808\u5148\u5c07\u524d\u4e00\u500b\u92b7\u6bc0\u624d\u80fd\u5efa\u7acb\u4e0b\u4e00\u500b<\/p>\n
- \n
- how to destroy and reinitialize the datatable \u2014 DataTables forums<\/a><\/li>\n<\/ul>\n
$('#id_table_1').DataTable().clear().destroy();<\/pre>\n--<\/p>\n
\u79fb\u9664\u6392\u5e8f\u7b26\u865f<\/h2>\n
- \n
- Remove sorting arrows in jQuery DataTables<\/a><\/li>\n<\/ul>\n
.dataTable > thead > tr > th[class*=\"sort\"]:before,\r\n.dataTable > thead > tr > th[class*=\"sort\"]:after {\r\n content: \"\" !important;\r\n}<\/pre>\n--<\/p>\n
\u5c07\u8868\u982d\u56fa\u5b9a\u5728\u7db2\u9801\u4e0a\u65b9<\/h2>\n
- \n
- DataTables example - With FixedHeader<\/a><\/li>\n<\/ul>\n
$('#myTable').DataTable( {\r\n fixedHeader: true\r\n} );<\/pre>\n--<\/p>\n
thead CSS<\/h2>\n
- \n
- How I can change background-color for thead? \u2014 DataTables forums<\/a><\/li>\n<\/ul>\n
table.dataTable thead {\r\n background-color: #5e5e5e;\r\n color: #fff;\r\n}<\/pre>\n--<\/p>\n
\u9ede\u5206\u9801\u6372\u52d5\u56de\u4e0a\u65b9<\/h2>\n
- \n
- Events (datatables.net)<\/a><\/li>\n
- jquery datatables scroll to top when pages clicked from bottom<\/a><\/li>\n<\/ul>\n
\u6b63\u5e38\u4f7f\u7528<\/p>\n
$table.on('page.dt', function() {\r\n $('html, body').animate({\r\n scrollTop: $(\".dataTables_wrapper\").offset().top\r\n }, 50);\r\n});\r\n<\/pre>\nAjax<\/p>\n
$table.on('xhr.dt', function() {\r\n $('html, body').animate({\r\n scrollTop: $(\".dataTables_wrapper\").offset().top\r\n }, 50);\r\n});<\/pre>\n\u4f7f\u7528 scrollY \u7684\u60c5\u6cc1<\/p>\n
$table.on('page.dt', function() {\r\n $(\".dataTables_scrollBody\").scrollTop(0);\r\n $(\".dataTables_scroll\").scrollTop(0);\r\n});\r\n<\/pre>\n--<\/p>\n
\u5b9a\u7fa9\u884c\u9ad8<\/h2>\n
- jquery datatables scroll to top when pages clicked from bottom<\/a><\/li>\n<\/ul>\n
- Events (datatables.net)<\/a><\/li>\n
- How I can change background-color for thead? \u2014 DataTables forums<\/a><\/li>\n<\/ul>\n
- DataTables example - With FixedHeader<\/a><\/li>\n<\/ul>\n
- Remove sorting arrows in jQuery DataTables<\/a><\/li>\n<\/ul>\n
- how to destroy and reinitialize the datatable \u2014 DataTables forums<\/a><\/li>\n<\/ul>\n
- DataTables example - Multiple table control elements<\/a><\/li>\n<\/ul>\n
- How to Build a Custom Pagination Component in React (freecodecamp.org)<\/a><\/li>\n<\/ul>\n
- DataTables example - Remote language file<\/a><\/li>\n
- DataTables example - Language options<\/a><\/li>\n
- \u7b2c11\u8eca\u5ec2-table\u754c\u7684\u795e\u5668!DataTables\u4ecb\u7d39\u7bc7(1) - iT \u90a6\u5e6b\u5fd9::\u4e00\u8d77\u5e6b\u5fd9\u89e3\u6c7a\u96e3\u984c\uff0c\u62ef\u6551 IT \u4eba\u7684\u4e00\u5929 (ithome.com.tw)<\/a><\/li>\n<\/ul>\n