refactor: simplify datatable & bump to v2

composer.lock

@@ -622,16 +622,16 @@
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.300.17",
+            "version": "3.301.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "ddd93079be1646e7db727d078f4c5beee1ddb052"
+                "reference": "a0173e793f244eeedd0a47d40437a3bb9d8f05b8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/ddd93079be1646e7db727d078f4c5beee1ddb052",
-                "reference": "ddd93079be1646e7db727d078f4c5beee1ddb052",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/a0173e793f244eeedd0a47d40437a3bb9d8f05b8",
+                "reference": "a0173e793f244eeedd0a47d40437a3bb9d8f05b8",
                 "shasum": ""
             },
             "require": {
@@ -711,9 +711,9 @@
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.300.17"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.301.0"
             },
-            "time": "2024-03-13T18:08:32+00:00"
+            "time": "2024-03-14T18:09:12+00:00"
         },
         {
             "name": "bacon/bacon-qr-code",
@@ -1028,16 +1028,16 @@
         },
         {
             "name": "composer/ca-bundle",
-            "version": "1.4.1",
+            "version": "1.4.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/composer/ca-bundle.git",
-                "reference": "3ce240142f6d59b808dd65c1f52f7a1c252e6cfd"
+                "reference": "18fc0ab083a48f85bfee31f3786537353b8a8403"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/composer/ca-bundle/zipball/3ce240142f6d59b808dd65c1f52f7a1c252e6cfd",
-                "reference": "3ce240142f6d59b808dd65c1f52f7a1c252e6cfd",
+                "url": "https://api.github.com/repos/composer/ca-bundle/zipball/18fc0ab083a48f85bfee31f3786537353b8a8403",
+                "reference": "18fc0ab083a48f85bfee31f3786537353b8a8403",
                 "shasum": ""
             },
             "require": {
@@ -1084,7 +1084,7 @@
             "support": {
                 "irc": "irc://irc.freenode.org/composer",
                 "issues": "https://github.com/composer/ca-bundle/issues",
-                "source": "https://github.com/composer/ca-bundle/tree/1.4.1"
+                "source": "https://github.com/composer/ca-bundle/tree/1.4.2"
             },
             "funding": [
                 {
@@ -1100,7 +1100,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-02-23T10:16:52+00:00"
+            "time": "2024-03-14T13:20:33+00:00"
         },
         {
             "name": "dasprid/enum",
@@ -1703,16 +1703,16 @@
         },
         {
             "name": "illuminate/collections",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/collections.git",
-                "reference": "1a81a4ba053807ee5602e0dd27e9d8f5e779fc06"
+                "reference": "6a5cd843d209a270587d62c40d797ea35e47ed5d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/collections/zipball/1a81a4ba053807ee5602e0dd27e9d8f5e779fc06",
-                "reference": "1a81a4ba053807ee5602e0dd27e9d8f5e779fc06",
+                "url": "https://api.github.com/repos/illuminate/collections/zipball/6a5cd843d209a270587d62c40d797ea35e47ed5d",
+                "reference": "6a5cd843d209a270587d62c40d797ea35e47ed5d",
                 "shasum": ""
             },
             "require": {
@@ -1754,11 +1754,11 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2024-03-12T18:40:10+00:00"
+            "time": "2024-03-13T20:54:13+00:00"
         },
         {
             "name": "illuminate/conditionable",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/conditionable.git",
@@ -1804,7 +1804,7 @@
         },
         {
             "name": "illuminate/container",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/container.git",
@@ -1855,7 +1855,7 @@
         },
         {
             "name": "illuminate/contracts",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/contracts.git",
@@ -1903,7 +1903,7 @@
         },
         {
             "name": "illuminate/database",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/database.git",
@@ -1971,7 +1971,7 @@
         },
         {
             "name": "illuminate/macroable",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/macroable.git",
@@ -2017,7 +2017,7 @@
         },
         {
             "name": "illuminate/pagination",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/pagination.git",
@@ -2067,7 +2067,7 @@
         },
         {
             "name": "illuminate/support",
-            "version": "v11.0.5",
+            "version": "v11.0.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/illuminate/support.git",
@@ -5029,16 +5029,16 @@
         },
         {
             "name": "stripe/stripe-php",
-            "version": "v13.13.0",
+            "version": "v13.14.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/stripe/stripe-php.git",
-                "reference": "8dc58bab25f222a74d1157d4ca9e9e48451dd0c1"
+                "reference": "d569265e79dc82329dadea1b1088a0a29c7a8a76"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/stripe/stripe-php/zipball/8dc58bab25f222a74d1157d4ca9e9e48451dd0c1",
-                "reference": "8dc58bab25f222a74d1157d4ca9e9e48451dd0c1",
+                "url": "https://api.github.com/repos/stripe/stripe-php/zipball/d569265e79dc82329dadea1b1088a0a29c7a8a76",
+                "reference": "d569265e79dc82329dadea1b1088a0a29c7a8a76",
                 "shasum": ""
             },
             "require": {
@@ -5082,9 +5082,9 @@
             ],
             "support": {
                 "issues": "https://github.com/stripe/stripe-php/issues",
-                "source": "https://github.com/stripe/stripe-php/tree/v13.13.0"
+                "source": "https://github.com/stripe/stripe-php/tree/v13.14.0"
             },
-            "time": "2024-02-29T20:22:15+00:00"
+            "time": "2024-03-14T21:12:02+00:00"
         },
         {
             "name": "symfony/clock",

resources/views/tabler/admin/announcement/create.tpl

@@ -1,6 +1,6 @@
 {include file='admin/header.tpl'}
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js"></script>
 
 <div class="page-wrapper">
     <div class="container-xl">

resources/views/tabler/admin/announcement/edit.tpl

@@ -1,6 +1,6 @@
 {include file='admin/header.tpl'}
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js"></script>
 
 <div class="page-wrapper">
     <div class="container-xl">

resources/views/tabler/admin/announcement/index.tpl

@@ -45,60 +45,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/announcement/ajax',
-                type: 'POST',
-                dataSrc: 'anns'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'asc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/announcement/ajax',
+            type: 'POST',
+            dataSrc: 'anns'
+        };
+        tableConfig.order = [
+            [1, 'asc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/coupon.tpl

@@ -111,6 +111,8 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
         flatpickr("#expire_time", {
             enableTime: true,
@@ -120,59 +122,22 @@
             locale: "zh"
         });
 
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/coupon/ajax',
-                type: 'POST',
-                dataSrc: 'coupons'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/coupon/ajax',
+            type: 'POST',
+            dataSrc: 'coupons'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/detect.tpl

@@ -94,60 +94,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/detect/ajax',
-                type: 'POST',
-                dataSrc: 'rules'
+        tableConfig.ajax = {
+            url: '/admin/detect/ajax',
+            type: 'POST',
+            dataSrc: 'rules'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
             },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"ti ti-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"></i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            }
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         $("#add-detect-button").click(function () {
             $.ajax({

resources/views/tabler/admin/docs/create.tpl

@@ -1,6 +1,6 @@
 {include file='admin/header.tpl'}
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js"></script>
 
 <div class="page-wrapper">
     <div class="container-xl">

resources/views/tabler/admin/docs/edit.tpl

@@ -1,6 +1,6 @@
 {include file='admin/header.tpl'}
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js"></script>
 
 <div class="page-wrapper">
     <div class="container-xl">

resources/views/tabler/admin/docs/index.tpl

@@ -45,60 +45,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/docs/ajax',
-                type: 'POST',
-                dataSrc: 'docs'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'asc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/docs/ajax',
+            type: 'POST',
+            dataSrc: 'docs'
+        };
+        tableConfig.order = [
+            [1, 'asc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/giftcard.tpl

@@ -97,60 +97,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/giftcard/ajax',
-                type: 'POST',
-                dataSrc: 'giftcards'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/giftcard/ajax',
+            type: 'POST',
+            dataSrc: 'giftcards'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/header.tpl

@@ -6,17 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
     <meta name="format-detection" content="telephone=no"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>{$config['appName']}</title>
     <!-- CSS files -->
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet"/>
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet"/>
-    <link href="//cdn.datatables.net/v/bs5/dt-1.13.8/datatables.min.css" rel="stylesheet"/>
     <!-- JS files -->
     <script src="//{$config['jsdelivr_url']}/npm/qrcode_js@latest/qrcode.min.js"></script>
     <script src="//{$config['jsdelivr_url']}/npm/clipboard@latest/dist/clipboard.min.js"></script>
     <script src="//{$config['jsdelivr_url']}/npm/jquery/dist/jquery.min.js"></script>
-    <script src="//cdn.datatables.net/v/bs5/dt-1.13.8/datatables.min.js"></script>
     <style>
         .home-subtitle {
             font-size: 14px;

resources/views/tabler/admin/invoice/index.tpl

@@ -39,60 +39,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/invoice/ajax',
-                type: 'POST',
-                dataSrc: 'invoices'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/invoice/ajax',
+            type: 'POST',
+            dataSrc: 'invoices'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/detect.tpl

@@ -37,63 +37,26 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            "serverSide": true,
-            "searching": true,
-            "ordering": true,
-            ajax: {
-                url: '/admin/detect/log/ajax',
-                type: 'POST',
-                dataSrc: 'logs.data'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            columnDefs: [
-                {
-                    orderable: false,
-                    targets: [3, 5]
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
+        tableConfig.serverSide = true;
+        tableConfig.ajax = {
+            url: '/admin/detect/log/ajax',
+            type: 'POST',
+            dataSrc: 'logs.data'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                orderable: false,
+                targets: [3, 5]
             },
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/detect_ban.tpl

@@ -37,63 +37,26 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            "serverSide": true,
-            "searching": true,
-            "ordering": true,
-            ajax: {
-                url: '/admin/detect/ban/ajax',
-                type: 'POST',
-                dataSrc: 'bans.data'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            columnDefs: [
-                {
-                    orderable: false,
-                    targets: [6]
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
+        tableConfig.serverSide = true;
+        tableConfig.ajax = {
+            url: '/admin/detect/ban/ajax',
+            type: 'POST',
+            dataSrc: 'bans.data'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                orderable: false,
+                targets: [6]
             },
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/gateway.tpl

@@ -37,54 +37,19 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/gateway/ajax',
-                type: 'POST',
-                dataSrc: 'paylists'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"ti ti-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"></i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            }
-        });
+        tableConfig.ajax = {
+            url: '/admin/gateway/ajax',
+            type: 'POST',
+            dataSrc: 'paylists'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/login.tpl

@@ -37,63 +37,26 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            "serverSide": true,
-            "searching": true,
-            "ordering": true,
-            ajax: {
-                url: '/admin/login/ajax',
-                type: 'POST',
-                dataSrc: 'logins.data'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            columnDefs: [
-                {
-                    orderable: false,
-                    targets: [3]
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
+        tableConfig.serverSide = true;
+        tableConfig.ajax = {
+            url: '/admin/login/ajax',
+            type: 'POST',
+            dataSrc: 'logins.data'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                orderable: false,
+                targets: [3]
             },
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/money.tpl

@@ -37,54 +37,19 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/money/ajax',
-                type: 'POST',
-                dataSrc: 'money_logs'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"ti ti-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"></i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            }
-        });
+        tableConfig.ajax = {
+            url: '/admin/money/ajax',
+            type: 'POST',
+            dataSrc: 'money_logs'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/online.tpl

@@ -37,63 +37,26 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            "serverSide": true,
-            "searching": true,
-            "ordering": true,
-            ajax: {
-                url: '/admin/online/ajax',
-                type: 'POST',
-                dataSrc: 'onlines.data'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            columnDefs: [
-                {
-                    orderable: false,
-                    targets: [0, 3, 5]
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
+        tableConfig.serverSide = true;
+        tableConfig.ajax = {
+            url: '/admin/online/ajax',
+            type: 'POST',
+            dataSrc: 'onlines.data'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                orderable: false,
+                targets: [0, 3, 5]
             },
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/payback.tpl

@@ -37,54 +37,19 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/payback/ajax',
-                type: 'POST',
-                dataSrc: 'paybacks'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"ti ti-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"></i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            }
-        });
+        tableConfig.ajax = {
+            url: '/admin/payback/ajax',
+            type: 'POST',
+            dataSrc: 'paybacks'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/log/sub.tpl

@@ -37,63 +37,26 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            "serverSide": true,
-            "searching": true,
-            "ordering": true,
-            ajax: {
-                url: '/admin/subscribe/ajax',
-                type: 'POST',
-                dataSrc: 'subscribes.data'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [0, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            columnDefs: [
-                {
-                    orderable: false,
-                    targets: [4]
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "（在 _MAX_ 项中查找）",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
+        tableConfig.serverSide = true;
+        tableConfig.ajax = {
+            url: '/admin/subscribe/ajax',
+            type: 'POST',
+            dataSrc: 'subscribes.data'
+        };
+        tableConfig.order = [
+            [0, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                orderable: false,
+                targets: [4]
             },
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/node/index.tpl

@@ -47,60 +47,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/node/ajax',
-                type: 'POST',
-                dataSrc: 'nodes'
+        tableConfig.ajax = {
+            url: '/admin/node/ajax',
+            type: 'POST',
+            dataSrc: 'nodes'
+        };
+        tableConfig.order = [
+            [1, 'asc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
             },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'asc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"ti ti-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"></i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            }
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/order/index.tpl

@@ -37,60 +37,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/order/ajax',
-                type: 'POST',
-                dataSrc: 'orders'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/order/ajax',
+            type: 'POST',
+            dataSrc: 'orders'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/product/index.tpl

@@ -45,60 +45,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/product/ajax',
-                type: 'POST',
-                dataSrc: 'products'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/product/ajax',
+            type: 'POST',
+            dataSrc: 'products'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/ticket/index.tpl

@@ -37,60 +37,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/ticket/ajax',
-                type: 'POST',
-                dataSrc: 'tickets'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/admin/ticket/ajax',
+            type: 'POST',
+            dataSrc: 'tickets'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/admin/user/index.tpl

@@ -96,60 +96,25 @@
         </div>
     </div>
 
+    {include file='datatable.tpl'}
+
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/admin/user/ajax',
-                type: 'POST',
-                dataSrc: 'users'
+        tableConfig.ajax = {
+            url: '/admin/user/ajax',
+            type: 'POST',
+            dataSrc: 'users'
+        };
+        tableConfig.order = [
+            [1, 'asc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0, 6, 7],
+                orderable: false
             },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'asc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0, 6, 7],
-                    orderable: false
-                },
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"ti ti-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"></i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            }
-        });
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/datatable.tpl

@@ -0,0 +1,60 @@
+<link href="//cdn.datatables.net/v/bs5/dt-2.0.2/datatables.min.css" rel="stylesheet"/>
+<script src="//cdn.datatables.net/v/bs5/dt-2.0.2/datatables.min.js"></script>
+
+<script>
+    let tableConfig = {
+        autoWidth: false,
+        iDisplayLength: 10,
+        scrollX: true,
+        columns: [
+            {foreach $details['field'] as $key => $value}
+            {
+                data: '{$key}'
+            },
+            {/foreach}
+        ],
+        initComplete: function () {
+            let tableHeader = $('div.dt-length').parent().parent()
+            let tableBody = $('div.dt-scroll').parent().parent()
+            let tableFooter = $('div.dt-info').parent().parent()
+            let length = $('div.dt-length').parent()
+            let search = $('div.dt-search').parent()
+            let info = $('div.dt-info').parent()
+            let paging = $('div.dt-paging').parent()
+
+            tableHeader.removeClass('mt-2').addClass('row px-3 py-3')
+            tableBody.removeClass('mt-2')
+            tableFooter.removeClass('mt-2').addClass('row card-footer')
+            length.removeClass('col-md-auto me-auto').addClass('col-auto')
+            search.removeClass('col-md-auto me-auto ms-auto').addClass('col-auto')
+            info.removeClass('col-md-auto me-auto').addClass('col')
+            paging.removeClass('col-md-auto me-auto ms-auto').addClass('col-auto')
+
+            $('div.dt-scroll-body').css('border-bottom-style', 'none')
+        },
+        language: {
+            "sProcessing": "处理中...",
+            "sLengthMenu": "显示 _MENU_ 条",
+            "sZeroRecords": "没有匹配结果",
+            "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
+            "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
+            "sInfoFiltered": "(在 _MAX_ 项中查找)",
+            "sInfoPostFix": "",
+            "sSearch": "<i class=\"ti ti-search\"></i> ",
+            "sUrl": "",
+            "sEmptyTable": "表中数据为空",
+            "sLoadingRecords": "载入中...",
+            "sInfoThousands": ",",
+            "oPaginate": {
+                "sFirst": "首页",
+                "sPrevious": "<i class=\"ti ti-arrow-left\"></i>",
+                "sNext": "<i class=\"ti ti-arrow-right\"></i>",
+                "sLast": "末页"
+            },
+            "oAria": {
+                "sSortAscending": ": 以升序排列此列",
+                "sSortDescending": ": 以降序排列此列"
+            }
+        }
+    };
+</script>

resources/views/tabler/user/invoice/index.tpl

@@ -1,7 +1,5 @@
 {include file='user/header.tpl'}
 
-<link href="//cdn.datatables.net/v/bs5/dt-1.13.8/datatables.min.css" rel="stylesheet"/>
-
 <div class="page-wrapper">
     <div class="container-xl">
         <div class="page-header d-print-none text-white">
@@ -40,62 +38,26 @@
     </div>
 
     <script src="//{$config['jsdelivr_url']}/npm/jquery/dist/jquery.min.js"></script>
-    <script src="//cdn.datatables.net/v/bs5/dt-1.13.8/datatables.min.js"></script>
+
+    {include file='datatable.tpl'}
 
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/user/invoice/ajax',
-                type: 'POST',
-                dataSrc: 'invoices'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/user/invoice/ajax',
+            type: 'POST',
+            dataSrc: 'invoices'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;

resources/views/tabler/user/order/index.tpl

@@ -1,7 +1,5 @@
 {include file='user/header.tpl'}
 
-<link href="//cdn.datatables.net/v/bs5/dt-1.13.8/datatables.min.css" rel="stylesheet"/>
-
 <div class="page-wrapper">
     <div class="container-xl">
         <div class="page-header d-print-none text-white">
@@ -40,62 +38,26 @@
     </div>
 
     <script src="//{$config['jsdelivr_url']}/npm/jquery/dist/jquery.min.js"></script>
-    <script src="//cdn.datatables.net/v/bs5/dt-1.13.8/datatables.min.js"></script>
+
+    {include file='datatable.tpl'}
 
     <script>
-        let table = new DataTable('#data-table', {
-            ajax: {
-                url: '/user/order/ajax',
-                type: 'POST',
-                dataSrc: 'orders'
-            },
-            "autoWidth": false,
-            'iDisplayLength': 10,
-            'scrollX': true,
-            'order': [
-                [1, 'desc']
-            ],
-            columns: [
-                {foreach $details['field'] as $key => $value}
-                {
-                    data: '{$key}'
-                },
-                {/foreach}
-            ],
-            "columnDefs": [
-                {
-                    targets: [0],
-                    orderable: false
-                }
-            ],
-            "dom": "<'row px-3 py-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row card-footer d-flex d-flexalign-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-            language: {
-                "sProcessing": "处理中...",
-                "sLengthMenu": "显示 _MENU_ 条",
-                "sZeroRecords": "没有匹配结果",
-                "sInfo": "第 _START_ 至 _END_ 项结果，共 _TOTAL_项",
-                "sInfoEmpty": "第 0 至 0 项结果，共 0 项",
-                "sInfoFiltered": "(在 _MAX_ 项中查找)",
-                "sInfoPostFix": "",
-                "sSearch": "<i class=\"ti ti-search\"></i> ",
-                "sUrl": "",
-                "sEmptyTable": "表中数据为空",
-                "sLoadingRecords": "载入中...",
-                "sInfoThousands": ",",
-                "oPaginate": {
-                    "sFirst": "首页",
-                    "sPrevious": "<i class=\"titi-arrow-left\"></i>",
-                    "sNext": "<i class=\"ti ti-arrow-right\"><i>",
-                    "sLast": "末页"
-                },
-                "oAria": {
-                    "sSortAscending": ": 以升序排列此列",
-                    "sSortDescending": ": 以降序排列此列"
-                }
-            },
-        });
+        tableConfig.ajax = {
+            url: '/user/order/ajax',
+            type: 'POST',
+            dataSrc: 'orders'
+        };
+        tableConfig.order = [
+            [1, 'desc']
+        ];
+        tableConfig.columnDefs = [
+            {
+                targets: [0],
+                orderable: false
+            }
+        ];
+
+        let table = new DataTable('#data-table', tableConfig);
 
         function loadTable() {
             table;