title: DataTables warning: table id=users-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7
body: <p>I am trying to retrieve data in the database with DataTables in laravel but I getting two error: DataTables warning: table id=users-table - Ajax error. For more information about this error, please see <a href="http://datatables.net/tn/7" rel="nofollow noreferrer">http://datatables.net/tn/7</a></p>
  <p>my table looks like this:</p>
  <pre><code>&lt;section id=&quot;basic-datatable&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-12&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
           &lt;table class=&quot;datatables-basic table&quot; id=&quot;users-table&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;id&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Email&lt;/th&gt;
                &lt;th&gt;Date&lt;/th&gt;
                &lt;th&gt;Salary&lt;/th&gt;
                &lt;th&gt;Status&lt;/th&gt;
                &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Modal to add new record --&gt;
    &lt;div class=&quot;modal modal-slide-in fade&quot; id=&quot;modals-slide-in&quot;&gt;
      &lt;div class=&quot;modal-dialog sidebar-sm&quot;&gt;
        &lt;form class=&quot;add-new-record modal-content pt-0&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;×&lt;/button&gt;
          &lt;div class=&quot;modal-header mb-1&quot;&gt;
            &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;New Record&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body flex-grow-1&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label class=&quot;form-label&quot; for=&quot;basic-icon-default-fullname&quot;&gt;Full Name&lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                class=&quot;form-control dt-full-name&quot;
                id=&quot;basic-icon-default-fullname&quot;
                placeholder=&quot;John Doe&quot;
                aria-label=&quot;John Doe&quot;
              /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label class=&quot;form-label&quot; for=&quot;basic-icon-default-post&quot;&gt;Post&lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                id=&quot;basic-icon-default-post&quot;
                class=&quot;form-control dt-post&quot;
                placeholder=&quot;Web Developer&quot;
                aria-label=&quot;Web Developer&quot;
              /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label class=&quot;form-label&quot; for=&quot;basic-icon-default-email&quot;&gt;Email&lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                id=&quot;basic-icon-default-email&quot;
                class=&quot;form-control dt-email&quot;
                placeholder=&quot;john.doe@example.com&quot;
                aria-label=&quot;john.doe@example.com&quot;
              /&gt;
              &lt;small class=&quot;form-text text-muted&quot;&gt; You can use letters, numbers &amp; periods &lt;/small&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label class=&quot;form-label&quot; for=&quot;basic-icon-default-date&quot;&gt;Joining Date&lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                class=&quot;form-control dt-date&quot;
                id=&quot;basic-icon-default-date&quot;
                placeholder=&quot;MM/DD/YYYY&quot;
                aria-label=&quot;MM/DD/YYYY&quot;
              /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group mb-4&quot;&gt;
              &lt;label class=&quot;form-label&quot; for=&quot;basic-icon-default-salary&quot;&gt;Salary&lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                id=&quot;basic-icon-default-salary&quot;
                class=&quot;form-control dt-salary&quot;
                placeholder=&quot;$12000&quot;
                aria-label=&quot;$12000&quot;
              /&gt;
            &lt;/div&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-primary data-submit mr-1&quot;&gt;Submit&lt;/button&gt;
            &lt;button type=&quot;reset&quot; class=&quot;btn btn-outline-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>my java script is:</p>
  <pre><code>
       * DataTables Basic
       */
          $(function () {
          'use strict';
              var dt_basic_table = $('.datatables-basic'),
        if (dt_basic_table.length) {
          var dt_basic = dt_basic_table.DataTable({
              processing: true,
              serverSide: true,
              autoWidth: false,
              ajax: '{!! route('users.data') !!}',
                  language: {
                      url: '{{ asset('lang/' . (in_array(\Lang::locale(), ['dk', 'en']) ? \Lang::locale() : 'en') . '/datatable.json') }}'
                  },
                  drawCallback: function(){
                      var length_select = $(&quot;.dataTables_length&quot;);
                      var select = $(&quot;.dataTables_length&quot;).find(&quot;select&quot;);
                      select.addClass(&quot;tablet__select&quot;);
                  },
            columns: [
              { data: 'responsive_id' },
              { data: 'id' },
              { data: 'id' }, // used for sorting so will hide this column
              { data: 'full_name' },
              { data: 'email' },
              { data: 'start_date' },
              { data: 'salary' },
              { data: '' },
              { data: '' }
            ],
            columnDefs: [
              {
                // For Responsive
                className: 'control',
                orderable: false,
                responsivePriority: 2,
                targets: 0
              },
              {
                // For Checkboxes
                targets: 1,
                orderable: false,
                responsivePriority: 3,
                render: function (data, type, full, meta) {
                  return (
                    '&lt;div class=&quot;custom-control custom-checkbox&quot;&gt; &lt;input class=&quot;custom-control-input dt-checkboxes&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox' +
                    data +
                    '&quot; /&gt;&lt;label class=&quot;custom-control-label&quot; for=&quot;checkbox' +
                    data +
                    '&quot;&gt;&lt;/label&gt;&lt;/div&gt;'
                  );
                },
                checkboxes: {
                  selectAllRender:
                    '&lt;div class=&quot;custom-control custom-checkbox&quot;&gt; &lt;input class=&quot;custom-control-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkboxSelectAll&quot; /&gt;&lt;label class=&quot;custom-control-label&quot; for=&quot;checkboxSelectAll&quot;&gt;&lt;/label&gt;&lt;/div&gt;'
                }
              },
              {
                targets: 2,
                visible: false
              },
              {
                responsivePriority: 1,
                targets: 4
              },
              {
                // Label
                targets: -2,
                render: function (data, type, full, meta) {
                  var $status_number = full['status'];
                  var $status = {
                    1: { title: 'Current', class: 'badge-light-primary' },
                    2: { title: 'Professional', class: ' badge-light-success' },
                    3: { title: 'Rejected', class: ' badge-light-danger' },
                    4: { title: 'Resigned', class: ' badge-light-warning' },
                    5: { title: 'Applied', class: ' badge-light-info' }
                  };
                  if (typeof $status[$status_number] === 'undefined') {
                    return data;
                  }
                  return (
                    '&lt;span class=&quot;badge badge-pill ' +
                    $status[$status_number].class +
                    '&quot;&gt;' +
                    $status[$status_number].title +
                    '&lt;/span&gt;'
                  );
                }
              },
              {
                // Actions
                targets: -1,
                title: 'Actions',
                orderable: false,
                render: function (data, type, full, meta) {
                  return (
                    '&lt;div class=&quot;d-inline-flex&quot;&gt;' +
                    '&lt;a class=&quot;pr-1 dropdown-toggle hide-arrow text-primary&quot; data-toggle=&quot;dropdown&quot;&gt;' +
                    feather.icons['more-vertical'].toSvg({ class: 'font-small-4' }) +
                    '&lt;/a&gt;' +
                    '&lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;' +
                    '&lt;a href=&quot;javascript:;&quot; class=&quot;dropdown-item&quot;&gt;' +
                    feather.icons['file-text'].toSvg({ class: 'font-small-4 mr-50' }) +
                    'Details&lt;/a&gt;' +
                    '&lt;a href=&quot;javascript:;&quot; class=&quot;dropdown-item&quot;&gt;' +
                    feather.icons['archive'].toSvg({ class: 'font-small-4 mr-50' }) +
                    'Archive&lt;/a&gt;' +
                    '&lt;a href=&quot;javascript:;&quot; class=&quot;dropdown-item delete-record&quot;&gt;' +
                    feather.icons['trash-2'].toSvg({ class: 'font-small-4 mr-50' }) +
                    'Delete&lt;/a&gt;' +
                    '&lt;/div&gt;' +
                    '&lt;/div&gt;' +
                    '&lt;a href=&quot;javascript:;&quot; class=&quot;item-edit&quot;&gt;' +
                    feather.icons['edit'].toSvg({ class: 'font-small-4' }) +
                    '&lt;/a&gt;'
                  );
                }
              }
            ],
            order: [[2, 'desc']],
            dom:
              '&lt;&quot;card-header border-bottom p-1&quot;&lt;&quot;head-label&quot;&gt;&lt;&quot;dt-action-buttons text-right&quot;B&gt;&gt;&lt;&quot;d-flex justify-content-between align-items-center mx-0 row&quot;&lt;&quot;col-sm-12 col-md-6&quot;l&gt;&lt;&quot;col-sm-12 col-md-6&quot;f&gt;&gt;t&lt;&quot;d-flex justify-content-between mx-0 row&quot;&lt;&quot;col-sm-12 col-md-6&quot;i&gt;&lt;&quot;col-sm-12 col-md-6&quot;p&gt;&gt;',
            displayLength: 7,
            lengthMenu: [7, 10, 25, 50, 75, 100],
            buttons: [
              {
                extend: 'collection',
                className: 'btn btn-outline-secondary dropdown-toggle mr-2',
                text: feather.icons['share'].toSvg({ class: 'font-small-4 mr-50' }) + 'Export',
                buttons: [
                  {
                    extend: 'print',
                    text: feather.icons['printer'].toSvg({ class: 'font-small-4 mr-50' }) + 'Print',
                    className: 'dropdown-item',
                    exportOptions: { columns: [3, 4, 5, 6, 7] }
                  },
                  {
                    extend: 'csv',
                    text: feather.icons['file-text'].toSvg({ class: 'font-small-4 mr-50' }) + 'Csv',
                    className: 'dropdown-item',
                    exportOptions: { columns: [3, 4, 5, 6, 7] }
                  },
                  {
                    extend: 'excel',
                    text: feather.icons['file'].toSvg({ class: 'font-small-4 mr-50' }) + 'Excel',
                    className: 'dropdown-item',
                    exportOptions: { columns: [3, 4, 5, 6, 7] }
                  },
                  {
                    extend: 'pdf',
                    text: feather.icons['clipboard'].toSvg({ class: 'font-small-4 mr-50' }) + 'Pdf',
                    className: 'dropdown-item',
                    exportOptions: { columns: [3, 4, 5, 6, 7] }
                  },
                  {
                    extend: 'copy',
                    text: feather.icons['copy'].toSvg({ class: 'font-small-4 mr-50' }) + 'Copy',
                    className: 'dropdown-item',
                    exportOptions: { columns: [3, 4, 5, 6, 7] }
                  }
                ],
                init: function (api, node, config) {
                  $(node).removeClass('btn-secondary');
                  $(node).parent().removeClass('btn-group');
                  setTimeout(function () {
                    $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                  }, 50);
                }
              },
              {
                text: feather.icons['plus'].toSvg({ class: 'mr-50 font-small-4' }) + 'Add New Record',
                className: 'create-new btn btn-primary',
                attr: {
                  'data-toggle': 'modal',
                  'data-target': '#modals-slide-in'
                },
                init: function (api, node, config) {
                  $(node).removeClass('btn-secondary');
                }
              }
            ],
            responsive: {
              details: {
                display: $.fn.dataTable.Responsive.display.modal({
                  header: function (row) {
                    var data = row.data();
                    return 'Details of ' + data['full_name'];
                  }
                }),
                type: 'column',
                renderer: function (api, rowIdx, columns) {
                  var data = $.map(columns, function (col, i) {
                    return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
                      ? '&lt;tr data-dt-row=&quot;' +
                          col.rowIndex +
                          '&quot; data-dt-column=&quot;' +
                          col.columnIndex +
                          '&quot;&gt;' +
                          '&lt;td&gt;' +
                          col.title +
                          ':' +
                          '&lt;/td&gt; ' +
                          '&lt;td&gt;' +
                          col.data +
                          '&lt;/td&gt;' +
                          '&lt;/tr&gt;'
                      : '';
                  }).join('');
      
                  return data ? $('&lt;table class=&quot;table&quot;/&gt;').append(data) : false;
                }
              }
            },
            language: {
              paginate: {
                // remove previous &amp; next text from pagination
                previous: '&amp;nbsp;',
                next: '&amp;nbsp;'
              }
            }
          });
       //   $('div.head-label').html('&lt;h6 class=&quot;mb-0&quot;&gt;DataTable with Buttons&lt;/h6&gt;');
        }
      
        // Flat Date picker
        if (dt_date_table.length) {
          dt_date_table.flatpickr({
            monthSelectorType: 'static',
            dateFormat: 'm/d/Y'
          });
        }
      
        // Add New record
        // ? Remove/Update this code as per your requirements ?
      
        $('.data-submit').on('click', function () {
          var $new_name = $('.add-new-record .dt-full-name').val(),
            $new_post = $('.add-new-record .dt-post').val(),
            $new_email = $('.add-new-record .dt-email').val(),
            $new_date = $('.add-new-record .dt-date').val(),
            $new_salary = $('.add-new-record .dt-salary').val();
      
          if ($new_name != '') {
            dt_basic.row
              .add({
                responsive_id: null,
                id: count,
                full_name: $new_name,
                post: $new_post,
                email: $new_email,
                start_date: $new_date,
                salary: '$' + $new_salary,
                status: 5
              })
              .draw();
            count++;
            $('.modal').modal('hide');
          }
        });
      
        // Delete Record
        $('.datatables-basic tbody').on('click', '.delete-record', function () {
          dt_basic.row($(this).parents('tr')).remove().draw();`enter code here`
        });
      });
  
  </code></pre>
  <p>How can solve these errors with scripts?</p>