Tabler: Why I can't use Datatables with Tabler?

Created on 3 Jul 2018  路  4Comments  路  Source: tabler/tabler

Most helpful comment

Download datatables, link the js files to your requirejs config:

Add datatables to your assets/js/app.js

require.config({
    shim: {
        'bootstrap': ['jquery'],
        'sparkline': ['jquery'],
        'tablesorter': ['jquery'],
        'vector-map': ['jquery'],
        'vector-map-de': ['vector-map', 'jquery'],
        'vector-map-world': ['vector-map', 'jquery'],
        'core': ['bootstrap', 'jquery'],
        'datatable': ['jquery', 'datatables'],
    },
    paths: {
        'core': 'assets/js/core',
        'jquery': 'assets/js/vendors/jquery-3.2.1.min',
        'bootstrap': 'assets/js/vendors/bootstrap.bundle.min',
        'sparkline': 'assets/js/vendors/jquery.sparkline.min',
        'selectize': 'assets/js/vendors/selectize.min',
        'tablesorter': 'assets/js/vendors/jquery.tablesorter.min',
        'vector-map': 'assets/js/vendors/jquery-jvectormap-2.0.3.min',
        'vector-map-de': 'assets/js/vendors/jquery-jvectormap-de-merc',
        'vector-map-world': 'assets/js/vendors/jquery-jvectormap-world-mill',
        'circle-progress': 'assets/js/vendors/circle-progress.min',
        'datatables': 'assets/js/vendors/datatables',
    }
});

In your page where you want to render a datatable:

<script>
    require(['datatables'], function() {
        $(document).ready(function () {
            $('#table').DataTable({
            });
        });
    });
</script>

All 4 comments

I tried the solutions inside this issue 72 but it still does not work.
But when I try to unload the require.min.js file everything work very well

I am sorry to say this Tabler waste my time

Any news about this please?

136 have been merged into dev, but it still need a release.

Download datatables, link the js files to your requirejs config:

Add datatables to your assets/js/app.js

require.config({
    shim: {
        'bootstrap': ['jquery'],
        'sparkline': ['jquery'],
        'tablesorter': ['jquery'],
        'vector-map': ['jquery'],
        'vector-map-de': ['vector-map', 'jquery'],
        'vector-map-world': ['vector-map', 'jquery'],
        'core': ['bootstrap', 'jquery'],
        'datatable': ['jquery', 'datatables'],
    },
    paths: {
        'core': 'assets/js/core',
        'jquery': 'assets/js/vendors/jquery-3.2.1.min',
        'bootstrap': 'assets/js/vendors/bootstrap.bundle.min',
        'sparkline': 'assets/js/vendors/jquery.sparkline.min',
        'selectize': 'assets/js/vendors/selectize.min',
        'tablesorter': 'assets/js/vendors/jquery.tablesorter.min',
        'vector-map': 'assets/js/vendors/jquery-jvectormap-2.0.3.min',
        'vector-map-de': 'assets/js/vendors/jquery-jvectormap-de-merc',
        'vector-map-world': 'assets/js/vendors/jquery-jvectormap-world-mill',
        'circle-progress': 'assets/js/vendors/circle-progress.min',
        'datatables': 'assets/js/vendors/datatables',
    }
});

In your page where you want to render a datatable:

<script>
    require(['datatables'], function() {
        $(document).ready(function () {
            $('#table').DataTable({
            });
        });
    });
</script>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

coding-sunshine picture coding-sunshine  路  4Comments

ghost picture ghost  路  4Comments

ZeoNish picture ZeoNish  路  4Comments

drale2k picture drale2k  路  3Comments

guifelix picture guifelix  路  3Comments