如何在DataTables中通过POST请求实现自定义表单搜索？

后端（Django + django_serverside_datatable） #

1. 自定义视图类，支持POST请求并处理搜索参数
   继承django_serverside_datatable.views.ServerSideDatatableView，重写查询逻辑并允许POST方法：

   from django_serverside_datatable.views import ServerSideDatatableView
   from .models import User
   
   class UserDatatableView(ServerSideDatatableView):
       model = User
       columns = ['username', 'email']
       http_method_names = ['get', 'post']  # 开启POST请求支持
   
       def get_queryset(self):
           queryset = super().get_queryset()
           # 从POST请求中提取搜索参数
           username = self.request.POST.get('username', '')
           email = self.request.POST.get('email', '')
           
           if username:
               queryset = queryset.filter(username__icontains=username)
           if email:
               queryset = queryset.filter(email__icontains=email)
           
           return queryset
   

2. 配置路由（urls.py）：

   path('datatable/users/', UserDatatableView.as_view(), name='user_datatable'),
   

前端（jQuery + DataTables） #

1. 初始化表格并绑定搜索表单事件：

   <form id="search-form">
       <input type="text" name="username" placeholder="用户名">
       <input type="text" name="email" placeholder="邮箱">
       <button type="submit">搜索</button>
   </form>
   
   <table id="user-table" class="display" style="width:100%"></table>
   
   <script>
   $(document).ready(function() {
       let searchParams = {};
   
       // 初始化DataTables
       const table = $('#user-table').DataTable({
           serverSide: true,
           ajax: function(data, callback, settings) {
               $.ajax({
                   url: '/datatable/users/',
                   type: 'POST',
                   data: {
                       ...data,  // 保留DataTables自带的分页、排序参数
                       ...searchParams,  // 追加自定义搜索参数
                       csrfmiddlewaretoken: '{{ csrf_token }}'  // Django CSRF令牌
                   },
                   success: function(res) {
                       callback(res);
                   }
               });
           },
           columns: [
               { data: 'username' },
               { data: 'email' }
           ]
       });
   
       // 处理搜索表单提交
       $('#search-form').on('submit', function(e) {
           e.preventDefault();
           // 更新搜索参数
           searchParams = {
               username: $(this).find('input[name="username"]').val(),
               email: $(this).find('input[name="email"]').val()
           };
           // 触发表格重载
           table.draw();
       });
   });
   </script>
   

2. 关键注意点：
   • 用ajax函数替代固定URL，实现自定义POST请求逻辑
   • 必须携带csrfmiddlewaretoken，避免Django CSRF验证报错
   • 表单提交时阻止默认跳转，更新参数后调用table.draw()触发数据刷新

内容的提问来源于stack exchange，提问作者Kashif