- \n
- DataTables example - Server-side processing<\/a><\/li>\n
- Events (datatables.net)<\/a><\/li>\n<\/ul>\n
--<\/p>\n
$('#example').DataTable({\r\n processing: true,\r\n serverSide: true,\r\n ajax: '..\/server_side\/scripts\/server_processing.php',\r\n});<\/pre>\n- \n
- serverSide: true \u958b\u555f Server-side<\/li>\n
- processing: true \u958b\u555f\u52a0\u8f09\u52d5\u756b\uff0c\u9810\u8a2d\u662f false\uff0cHoyo \u4f7f\u7528\u53e6\u5916\u7684\u52a0\u8f09\u65b9\u5f0f\uff0c\u4e0b\u9762\u6703\u8b1b\u5230<\/li>\n
- ajax \u5f9e Server \u53d6\u8cc7\u6599\uff0cDataTable \u6703\u63d0\u4f9b\u8cc7\u6599\u8d77\u59cb\u3001\u7d50\u675f\u7b46\u6578\uff0c\u6240\u4ee5\u5f8c\u7aef\u5c31\u4e0d\u9700\u8981\u8a08\u7b97\u7b46\u6578\u8d77\u59cb\u5f88\u65b9\u4fbf<\/li>\n<\/ul>\n
--<\/p>\n
ajax \u50b3\u905e\u53c3\u6578<\/h2>\n
- \n
- DataTables example - POST data<\/a><\/li>\n
- Multiple search value on server side \u2014 DataTables forums<\/a><\/li>\n<\/ul>\n
DataTable \u7684 Server-side ajax \u4e00\u5b9a\u8981\u7528\u8b8a\u6578\u50b3\u905e\u904e\u53bb\uff0c\u4e0d\u80fd\u50cf jQuery ajax \u4e00\u6a23\u4f7f\u7528
data: $('#id_form_search').serialize()<\/code> \u9019\u6a23\u5c07\u6574\u500b\u8868\u55ae\u50b3\u905e\uff0c<\/p>\najax: {\r\n url: '\/admin\/v2\/User\/select',\r\n type: 'POST',\r\n data: function (d) {\r\n d.id = id_form_search.find('[name=\"id\"]').val();\r\n d.Name = id_form_search.find('[name=\"Name\"]').val();\r\n },\r\n}<\/pre>\n- \n
- type: 'POST' HTTP method \u5982\u679c\u6c92\u6709\u975e GET \u4e0d\u53ef\u90fd\u662f POST \u4e0d\u7528\u8a0e\u8ad6<\/li>\n
- data: function(d){} \u81ea\u5b9a\u7fa9\u641c\u5c0b\u689d\u4ef6\u6642\u8a2d\u5b9a<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2022\/11\/20221116_174813-1024x519.png\")
<\/a><\/p>\n--<\/p>\n
\u4e00\u5b9a\u8981\u4f7f\u7528 .serialize()<\/h2>\n
\u5982\u679c\u4e00\u5b9a\u8981\u4f7f\u7528 .serialize() \u90a3\u5c31\u5fc5\u9808\u7e5e\u500b\u5708\uff0c\u5c07\u8868\u55ae\u5c0d\u61c9\u5230\u4e00\u500b\u8b8a\u6578\u5167<\/p>\n
ajax: {\r\n url: '\/ajax.php',\r\n type: 'POST',\r\n data: function (d) {\r\n d['search'] = $id_form_search.serialize();\r\n },\r\n}<\/pre>\najax.php<\/p>\n
- \n
- PHP: parse_str - Manual<\/a><\/li>\n<\/ul>\n
parse_str($_POST['search'], $post);<\/pre>\n
\u4f7f\u7528 PHP parse_str() \u5c31\u53ef\u4ee5\u5c07 JavaScript serialize() \u8f49\u63db\u56de PHP \u7684\u9663\u5217<\/p>\n
--<\/p>\n
Ajax \u4e8b\u4ef6<\/h2>\n
\u524d\u9762\u5c07 ajax \u52a0\u8f09\u95dc\u9589\uff0c\u56e0\u70ba\u8981\u63db\u4e0a\u81ea\u5df1\u7684 ajax loader\uff0c\u9019\u6642\u5c31\u8981\u5957\u4e0a Event<\/p>\n
\u4e00\u822c\u4f7f\u7528\u7684\u5c31\u662f preXhr.dt \u57f7\u884c ajax \u524d\u4ee5\u53ca xhr.dt ajax \u5b8c\u6210\u9019\u5169\u500b event<\/p>\n
- \n
- Events (datatables.net)<\/a><\/li>\n
- jQuery LoadingOverlay - Gaspare Sganga<\/a><\/li>\n<\/ul>\n
let $table = $('#id_table_1');\r\n\r\n\/\/ ajax \u524d\u52a0\u8f09...\r\n$table.on('preXhr.dt', function() {\r\n $.LoadingOverlay(\"show\", {\r\n background: \"rgba(100,100,100,0.1)\",\r\n size: \"8\",\r\n });\r\n});\r\n\r\n\/\/ \u5b8c\u6210\r\n$table.on('xhr.dt', function() {\r\n $.LoadingOverlay(\"hide\");\r\n\r\n $('html, body').animate({\r\n scrollTop: $(\".dataTables_wrapper\").offset().top\r\n }, 10);\r\n});<\/pre>\n--<\/p>\n
\u5f48\u7a97\u8a0a\u606f<\/h2>\n
\u5982\u679c ajax \u6709\u56de\u50b3\u8a0a\u606f\u9700\u8981\u986f\u793a\u6216\u8655\u7406\uff0c\u4e5f\u662f\u4f7f\u7528 xhr.dt event \u4f86\u8655\u7406<\/p>\n
- jQuery LoadingOverlay - Gaspare Sganga<\/a><\/li>\n<\/ul>\n
- Events (datatables.net)<\/a><\/li>\n
- PHP: parse_str - Manual<\/a><\/li>\n<\/ul>\n
- Multiple search value on server side \u2014 DataTables forums<\/a><\/li>\n<\/ul>\n
- DataTables example - POST data<\/a><\/li>\n
- Events (datatables.net)<\/a><\/li>\n<\/ul>\n