django datatables外掛 分頁 表格
阿新 • • 發佈：2018-12-20
有了datatables外掛不需要自己寫分頁功能，而且datatables功能強大。
官方文件地址：https://datatables.net/examples/ajax/objects.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> </head> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>username</th> <th>age</th> <th>gender</th> <th>nickname</th> </tr> </thead> </table> </body> <script> $(document).ready(function() { $('#example').DataTable( { "ajax": "/datatables", "columns": [ { "data": "username" }, { "data": "age" }, { "data": "gender" }, { "data": "nickname" } ], "language": { "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json"#語言，現在用的是中文，其他的語言在http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/可以找到 } } ); } ); </script> </html>
"ajax": "/datatables"是設定獲取資料的地址，自己寫在路由裡
def info(req): return render(req, "datatables.html") def datatables(req): users_list = [] res = User.objects.all() for item in res: user_info = { "username":item.username, "age":item.age, "gender":item.gender, "nickname":item.nickname } users_list.append(user_info) user_dic = {} print(users_list) user_dic["data"] = users_list#按照官方文件的格式寫 return HttpResponse(json.dumps(user_dic))
效果如圖
資料匯出按鈕
可以匯出的資料格式為pdf，csv，列印，excel
參考文件：https://datatables.net/extensions/buttons/examples/initialisation/export
