jQuery DataTables move columns

Question

I try to use colReorder.move() from jQuery DataTables plug-in. I use constructor for configure links for this plug-in (i only add ColReorder extension) and use CDN links in my asp net core 3 project.

@section Scripts {
    <script>
    $(document).ready(function () {
        var table = $('#parcel').DataTable({
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Russian.json"
            },
            colReorder: true
        });
        table.colReorder.move(1, 2);
    });
    </script>
}

And I have this error

jquery.min.js:2 Uncaught TypeError: Cannot read property 's' of undefined
    at _Api.<anonymous> (datatables.js:16874)
    at Object.move (datatables.js:7216)
    at HTMLDocument.<anonymous> (Parcels:1076)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

colin0117 · Accepted Answer · 2020-05-22 07:50:05Z

2

It's because of the asynchronous nature of the language URL. On the language.url page it states:

Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request as completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

Therefore, put the code into initComplete, like this:

$(document).ready(function() {
var table = $('#example').DataTable({
    language: {
        url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Russian.json"
    },
    colReorder: true,
    initComplete: function() {
        table.colReorder.move(1, 2);

    }
});

});

Example here.

answered May 22, 2020 at 7:50

colin0117

1,5581 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andrewJames · Accepted Answer · 2020-05-21 20:34:00Z

I get an error, also. It looks as if there is an incompatibility/conflict between the two functions - the language and the column reorder.

A work-around is to replace the language URL with hard-coded JSON (the same data as provided by the URL):

<script type="text/javascript">

  $(document).ready(function () {
    var table = $('#parcel').DataTable({
      language: {
        "processing": "Подождите...",
        "search": "Поиск:",
        "lengthMenu": "Показать _MENU_ записей",
        "info": "Записи с _START_ до _END_ из _TOTAL_ записей",
        "infoEmpty": "Записи с 0 до 0 из 0 записей",
        "infoFiltered": "(отфильтровано из _MAX_ записей)",
        "infoPostFix": "",
        "loadingRecords": "Загрузка записей...",
        "zeroRecords": "Записи отсутствуют.",
        "emptyTable": "В таблице отсутствуют данные",
        "paginate": {
          "first": "Первая",
          "previous": "Предыдущая",
          "next": "Следующая",
          "last": "Последняя"
        },
        "aria": {
          "sortAscending": ": активировать для сортировки столбца по возрастанию",
          "sortDescending": ": активировать для сортировки столбца по убыванию"
        },
        "select": {
          "rows": {
            "_": "Выбрано записей: %d",
            "0": "Кликните по записи для выбора",
            "1": "Выбрана одна запись"
          }
        }
        //url: "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Russian.json"
      },
      colReorder: true
    });

    table.colReorder.move(1, 2);

  });

</script>

I know this is not ideal, but it worked for me. Hope it works for you also.

Also, just as a side-note, you should not be using a URL without the protocol.

So, instead of a URL like this:

//cdn.datatables.net/plug-ins/1.10.21/i18n/Russian.json"

you should use a URL like this:

https://cdn.datatables.net/plug-ins/1.10.21/i18n/Russian.json"

See this article for more information on not using protocol-relative URLs:

Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique [leaving out the protocol] is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset.

Collectives™ on Stack Overflow

jQuery DataTables move columns

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related