In what order should I add these JavaScript file references for jQuery datatables editor to work?

Question

I currently have JavaScript file references in this order:

<script src="/Scripts/datatables/jquery-1.11.3.min.js"></script>
<script src="/Scripts/datatables/editor.jqueryui.min.js"></script>
<script src="/Scripts/datatables/jquery.dataTables.min.js"></script>
<script src="/Scripts/datatables/dataTables.buttons.min.js"></script>
<script src="/Scripts/datatables/dataTables.editor.min.js"></script>
<script src="/Scripts/datatables/dataTables.keyTable.min.js"></script>
<script src="/Scripts/datatables/dataTables.select.min.js"></script>
<script src="/Scripts/datatables/editor.bootstrap.min.js"></script>
<script src="/Scripts/datatables/editor.foundation.min.js"></script>

However, I see the following two errors in the console of my browser's developer tools. I believe the order in which I have included these files is wrong. Could you please tell me the right order?

The first error is in the source file editor.jquery.ui.min.js and the second one is in dataTables.editor.min.js .

Answer 1

According to DataTables - jQuery UI example , you need to load JS files in the following order:

<script src="/Scripts/datatables/jquery-1.11.3.min.js"></script>
<script src="/Scripts/datatables/jquery-ui.js"></script>
<script src="/Scripts/datatables/jquery.dataTables.min.js"></script>
<script src="/Scripts/datatables/dataTables.jqueryui.min.js"></script>
<script src="/Scripts/datatables/dataTables.buttons.min.js"></script>
<script src="/Scripts/datatables/buttons.jqueryui.min.js"></script>
<script src="/Scripts/datatables/dataTables.select.min.js"></script>
<script src="/Scripts/datatables/dataTables.editor.min.js"></script>
<script src="/Scripts/datatables/dataTables.keyTable.min.js"></script>
<script src="/Scripts/datatables/editor.jqueryui.min.js"></script>

You were missing jquery-ui.js , and the order of some libraries were incorrect. Also you don't need editor.bootstrap.min.js and editor.foundation.min.js if you use jQuery UI styling.

Answer 2

The download page offers a customized import order easily. Just check the options you are using, and it will lay out the whole css and js import order