Init datatables even after ajax requests.

assets/js/app.js

@@ -45,6 +45,8 @@ require('jquery-form');
 window.$ = window.jQuery = require("jquery");
 
 require('bootstrap-treeview/src/js/bootstrap-treeview');
+require('./datatables.js');
+
 
 require('../ts_src/ajax_ui');
 import {ajaxUI} from "../ts_src/ajax_ui";

assets/js/datatables.js

@@ -13,6 +13,10 @@
      * Initializes the datatable dynamically.
      */
     $.fn.initDataTables = function(config, options) {
+
+        //Update default used url, so it reflects the current location (useful on single side apps)
+        $.fn.initDataTables.defaults.url = window.location.origin + window.location.pathname;
+
         var root = this,
             config = $.extend({}, $.fn.initDataTables.defaults, config),
             state = ''

assets/ts_src/ajax_ui.ts

@@ -75,9 +75,16 @@ class AjaxUI {
         this.BASE = $("body").data("base-url") + "/";
         console.info("Base path is " + this.BASE);
 
+        //Show flash messages
+        $(".toast").toast('show');
+
         this.registerLinks();
         this.registerForm();
         this.fillTrees();
+
+
+        this.initDataTables();
+
     }
 
     /**
@@ -198,7 +205,8 @@ class AjaxUI {
      */
     public registerLinks()
     {
-        $('a').not(".link-external, [data-no-ajax]").click(function (event) {
+        // Unbind all old handlers, so the things are not executed multiple times.
+        $('a').not(".link-external, [data-no-ajax]").unbind('click').click(function (event) {
                 let a = $(this);
                 let href = $.trim(a.attr("href"));
                 //Ignore links without href attr and nav links ('they only have a #)
@@ -232,6 +240,9 @@ class AjaxUI {
     }
 
 
+    /**
+     * Show the progressbar
+     */
     public showProgressBar()
     {
         //Blur content background
@@ -245,6 +256,9 @@ class AjaxUI {
         });
     }
 
+    /**
+     * Hides the progressbar.
+     */
     public hideProgressBar()
     {
         // @ts-ignore
@@ -322,7 +336,7 @@ class AjaxUI {
         ajaxUI.hideProgressBar();
 
         //Parse response to DOM structure
-        let dom = $.parseHTML(responseText);
+        let dom = $.parseHTML(responseText, document, true);
         //And replace the content container
         $("#content").replaceWith($("#content", dom));
         //Replace login menu too (so everything is up to date)
@@ -332,6 +346,10 @@ class AjaxUI {
         $("#message-container").replaceWith($('#message-container', dom));
         $(".toast").toast('show');
 
+        //Inject the local scripts
+        $("#script-reloading").replaceWith($('#script-reloading', dom));
+
+
         //Set new title
         let title  = extractTitle(responseText);
         document.title = title;
@@ -342,14 +360,38 @@ class AjaxUI {
             history.pushState(null, title, this.url);
         } else {
             //Clear pop state
-            ajaxUI.statePopped;
+            ajaxUI.statePopped = true;
         }
 
         //Do things on the new dom
         ajaxUI.registerLinks();
         ajaxUI.registerForm();
+        ajaxUI.initDataTables();
+    }
 
+    /**
+     * Init all datatables marked with data-datatable based on their data-settings attribute.
+     */
+    protected initDataTables()
+    {
+        //Find all datatables and init it.
+        let $tables = $('[data-datatable]');
+        $.each($tables, function(index, table) {
+            let $table = $(table);
+            let settings = $table.data('settings');
 
+            //@ts-ignore
+            var promise = $('#part_list').initDataTables(settings,
+                {
+                    "fixedHeader": { header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
+                        headerOffset: $("#navbar").height()}
+                });
+
+            //Register links.
+            promise.then(ajaxUI.registerLinks);
+        });
+
+        console.debug('Datatables inited.');
     }
 }
 

templates/base.html.twig

@@ -105,7 +105,7 @@
                             <li role="separator" class="dropdown-divider"></li>
                             <a class="dropdown-item disabled" href="#">{% trans %}user.language_select{% endtrans %}</a>
                             <a class="dropdown-item" data-no-ajax href="{{ path(app.request.attributes.get('_route'),
-                                   app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}">
+                                app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}">
                                 {% trans %}language.english{% endtrans %}</a>
                             <a class="dropdown-item" data-no-ajax href="{{ path(app.request.attributes.get('_route'),
                                 app.request.attributes.get('_route_params')|merge({'_locale': 'de'})) }}">
@@ -268,34 +268,9 @@
 {% block javascripts %}
     {{ encore_entry_script_tags('app') }}
 
-    <script src="{{ asset('helper/datatables.js') }}"></script>
-
-    <script>
-        $(".toast").toast('show');
-    </script>
 
 {% endblock %}
 
-
-<script>
-    {#
-    $.getJSON("{{ path("tree_tools") }}",null, function (data) {
-        $('#tree-tools').treeview({
-            data: data,
-            showIcon: false
-        });
-    });
-
-    $.getJSON("{{ path("tree_category", {"id": 1}) }}",null, function (data) {
-        $('#tree-categories').treeview({
-            data: data,
-            showIcon: false,
-            enableLinks: true
-        });
-    });
-    #}
-</script>
-
 {% block scripts %}
 
 {% endblock %}

templates/parts_list.html.twig

@@ -6,7 +6,7 @@
         <div class="card-header bg-primary text-white">
             <h6>Bauteile</h6>
         </div>
-        <div id="part_list" class="table-responsive">
+        <div id="part_list" class="table-responsive" data-datatable data-settings='{{ datatable_settings(datatable) }}'>
             <div class="card-body">
                 <h4>{% trans %}part_list.loading.caption{% endtrans %}</h4>
                 <h6>{% trans %}part_list.loading.message{% endtrans %}</h6>
@@ -15,15 +15,3 @@
     </div>
 
 {% endblock %}
-
-{% block scripts %}
-    <script>
-        $( function() {
-            $('#part_list').initDataTables({{ datatable_settings(datatable) }},
-                {
-                    "fixedHeader": { header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
-                        headerOffset: $("#navbar").height()}
-                });
-        });
-    </script>
-{% endblock %}