Блог

У меня есть требование создать форму поиска, которая будет вызывать веб-api и заполнять jQuery DataTable при нажатии кнопки. Я не хочу загружать форму до тех пор, пока не будет нажата кнопка, поэтому у меня есть отдельный обработчик кнопок для вызова моего метода post. Мне сказали, что я должен использовать ajax.reload() с этим на случай, если кому-то придется снова искать, чтобы сузить результаты, но у меня возникли некоторые проблемы с внедрением этого в мой код. Кто-нибудь может помочь мне с моим требованием? Мой код отлично работает как есть, но я хотел бы знать, можно ли это сделать более эффективно. Смотрите мой рабочий код ниже.

 <script>
    var dataTable;
    var resultsContainer = $('#ResultsContainer');

    $(document).ready(function() {
      dataTable = $('#SearchResultsTable').DataTable({
        "columns": [
          { "data": "clientId" },
          { "data": "lastName"   },
          { "data": "firstName"  }
        ],
        "language": {
          "zeroRecords": '@Resource.NoRecordsFound'
        },
        "searching": false,
        "lengthChange": false
      });
    });

    $('#SearchButton').click(function (e) {
      e.preventDefault();
      RequestData();
    });

    function RequestData() {
      $.post('@Url.Content("?handler=ClientSearch")', $('#ClientSearchForm').serialize(), function (data) {
        ProcessResponse(data);
      });
    }

    function ProcessResponse(data) {  
        dataTable.clear();
        dataTable.rows.add(data);
        dataTable.draw();
        resultsContainer.addClass('d-block');
    }

  </script>



  

Похоже ajax.reload , что метод DataTable требует URL-адреса для определения данных. В примере на https://datatables.net/reference/api/ajax.reload , они используют ajax опцию в объекте конфигурации для установки URL-адреса:

 var table = $('#example').DataTable( {
    ajax: "data.json"
} );
  

Затем вызовы table.ajax.reload() будут просто извлекать обновленные данные data.json снова. В вашем случае вы делаете POST для извлечения данных с помощью формы поиска. Итак, вам нужно либо:

• используйте объект jQuery ajax в качестве значения вашего ajax параметра DataTable (см. https://datatables.net/reference/option/ajax#object ); или
• Установить ajax.url (https://datatables.net/reference/api/ajax.url ) при каждой отправке поисковой формы

Надеюсь, это поможет.