CODEWITHSUNDEEP
jquerydatatables
e1s
e1s

Reputation: 375

jQuery DataTables move columns

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)

Upvotes: 0

Views: 2840

Answers (2)

colin0117
colin0117

Reputation: 1542

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.

Upvotes: 2

andrewJames
andrewJames

Reputation: 21919

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.

Upvotes: 1

Related Questions