Auto-update of data does not work as in the example

Auto-update of data does not work as in the example

imballamaimballama Posts: 12Questions: 5Answers: 0

I used https://editor.datatables.net/examples/extensions/excel.html but auto-update data isn't work. What's problem?

var editor;
$(function() {
  $(document).ready(function() {


      editor = new $.fn.dataTable.Editor({
          ajax: {
              create: {
                  type: 'POST',
                  url: '/user/add'
              },
              edit: {
                  type: 'PUT',
                  url: '/user/edit'
              },
              remove: {
                  type: 'DELETE',
                  url: '/user/delete/{id}'
              }
          },
          idSrc: 'id',
          "language": {
              "url": "//cdn.datatables.net/plug-ins/1.11.3/i18n/ru.json"
          },
          "table": "#dtUsers",
          "fields": [
              {
                  label: "ID",
                  name: "id"
              },
              {
                  label: "date of the application",
                  name: "date_of_the_application",
                  type: "datetime",
                  def: new Date()
              },
              {
                  label: "initials",
                  name: "initials",
                  def: ""
              },
              {
                  label: "organization",
                  name: 'organization',
                  type: "select",
                  options: [
                      {label: "one", value: "one"},
                      {label: "two", value: "two"},
                      
                  ]
              },
              {
                  label: "personnel number",
                  name: "personnel_number",
                  def: "0"
              },
              {
                  label: "citizenship",
                  name: "citizenship",
                  type: "select",
                  options: [
                      {label: "AU", value: "AU"},
                      {label: "CA", value: "CA"},
                  ]
              },
              {
                  label: "date on migration card",
                  name: "date_on_migration_card",
                  type: "datetime",
                  def: new Date()
              },
              {
                  label: "list of documents",
                  name: "list_of_documents",
                  def: ""
              },
              {
                  label: "status",
                  name: "status",
                  type: "select",
                  options: [
                      {label: "Р", value: "Р"},
                      {label: "Т", value: "Т"},
                      {label: "Б", value: "Б"},
                      {label: "У", value: "У"},
                  ]
              },
              {
                  label: "application date reg",
                  name: "application_date_reg",
                  type: "datetime",
                  def: new Date()
              },
              {
                  label: "registration date",
                  name: "registration_date",
                  type: "datetime",
                  def: new Date()
              },
              {
                  label: "region",
                  name: "region",
                  def: ""
              },
              {
                  label: "application patent date",
                  name: "application_patent_date",
                  type: "datetime",
                  def: new Date()
              },
              {
                  label: "patent date",
                  name: "patent_date",
                  type: "datetime",
                  def: new Date()
              },
              {
                  label: "date of last check",
                  name: "date_of_last_check",
                  type: "datetime",
                  def: new Date()
              },
              {
                  label: "workshop",
                  name: "workshop",
                  type: "select",
                  options: [
                      {label: "one", value: "one"},
                      {label: "two", value: "two"},
                  ]
              },
              {
                  label: "place of residence",
                  name: "place_of_residence",
                  type: "select",
                  options: [
                      {label: "Hotel 1", value: "Hotel 1"},
                      {label: "Hotel 2", value: "Hotel 2"},
                  ]
              },
              {
                  label: "snils",
                  name: "snils",
                  def: "0"
              },
              {
                  label: "comment",
                  name: "comment",
                  def: ""
              },
              {
                  label: "org_id",
                  name: "org_id"
              }
          ]
      });
    editor.field('id').hide();
    editor.field('org_id').hide();


   var table = $('#dtUsers').DataTable({
      ajax: {
          url : "/api/user/"
      },
      dom: "Bfrtip",
      paging: false,
      "language": {
        "url": "//cdn.datatables.net/plug-ins/1.11.3/i18n/ru.json"
      },
      columns: [
        {data: 'id'},
        {
            data: 'date_of_the_application'
        },
        {data: 'initials'},
        {data: 'organization'},
        {data: 'workshop'},
        {data: 'personnel_number'},
        {data: 'citizenship'},
        {
            data: 'date_on_migration_card',
            className:'danger'
        },
        {data: 'list_of_documents'},
        {data: 'status'},
        {
            data: 'application_date_reg'
        },
        {
            data: 'registration_date',
            className:'danger'
        },
        {data: 'region'},
        {
            data: 'application_date_patent'
        },
        {
            data: 'patent_date',
            className:'danger'
        },
        {data: "date_of_last_check"},
        {data: 'place_of_residence'},
        {data: 'snils'},
        {data: 'comment'},
      ],
        autoFill: {
            columns: ':not(:first-child)',
            editor:  editor
        },
        keys: {
            columns: ':not(:first-child)',
            editor:  editor
        },
        select: {
            style:    'os',
            selector: 'td:first-child',
            blurable: true
        },
      colReorder: true,
      buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor },
            {
                extend: 'excelHtml5',
                title: 'Workers',
                text: 'To Excel'
            }
        ]
    });
  });
});

Answers

  • colincolin Posts: 14,362Questions: 1Answers: 2,444

    I suspect it's because you've not included the libraries. If you look at this example here (the one you linked to), ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

    If that doesn't help, please provide more details on why it doesn't work, and whether you see errors in the browser's console.

    Colin

Sign In or Register to comment.