DataTables and ajax


Topic: DataTables and ajax

Mohamed Aboughoufa asked 2 years ago

I am trying to fill Data table from ajax request with keeping Search controls is this possible ?
$('#dtBasicExample').DataTable({
'serverSide': true,
'ajax': { 'AccountTbls/Index2?cou=': 500}

});

Jakub Mandra staff premium commented 2 years ago

Hello, It's not possible now, they were meant to work with html markup. Regards

Piotr Glejzer staff answered 2 years ago

Hello, we support ajax like in normal DataTable. For example, if you want to use basic ajax I have a simple example of this. You need HTML MDB DataTable structure and initiate js code with ajax and JSON file. I created snipets with code and information and I checked that and It's working well.
Best,
Piotr
 

RegalarTech pro answered 2 years ago

So there is no AJAX support in MDB ?

MarkSmit answered a year ago

Hi, I am trying to get MDBootstrap (free version 4.8.1) working with JSON / Ajax, but unsuccessfully so far (HTML embedded data is working and my controller code gets called but there is a javascript error). I cannot download the snippet because it requires MDB Pro (?) Is there any way to try out snippets within the editor? Thanks for any help, Mark.


Piotr Obrebski staff answered a year ago

Hi MarkSmit,

Our snippets don't require you to be mdb pro user. You can test whatever you want in our test environment online. However, if you want to download code that requires mdb-pro and compile it locally on your device you need to buy our mdb pro license. You can test mdb free in our snippets and copy code. Run it in your localhost by setting up mdb free.

You can setup mdb free following instructions of this tutorial: https://mdbootstrap.com/education/bootstrap/quick-start/

If you need additional help I am here for you.

Best Regards, Piotr


gravey16 answered a year ago

The Following option does not work. It never hits the endpoint to get the data

"ajax": { "url":"http://127.0.0.1:5000/exante", "type":"GET" } 

The only real work around is to do this.

$

.get('http://127.0.0.1:5000/exante', function(dataset){
        var table = $('#exante').DataTable({
                                data:dataset,
                                columns:[
                                    {title:'Nodeid', data:'nodeid'},
                                    {title:'Tick', data:'time'},
                                    {title:'Lmp', data:'lmp'},
                                    {title:'Mcc', data:'mcc'},
                                    {title:'Mlc', data:'mlc'},
                                    {title:'IntLmp', data:'intlmp'},
                                    {title:'IntMcc', data:'intmcc'},
                                    {title:'Delta', data:'delta'},
                                    {title:'DaLmp', data:'dalmp'},
                                    {title:'DaMcc', data:'damcc'}
                                ],
                                select:true,
                                "paging":false
                            });
});

Hopefully this will get fixed at some point.


Piotr Obrebski staff commented a year ago

We will test this usecase.


amenabe answered 9 months ago

you should set async: false;


Please insert min. 20 characters.