Base solution for your next web application
Open Closed

Datatables #100

User avatar
0
cosmic created

Hi, anybody has an example to properly load data by the dynamic web API into the DataTables? I need server-side processing with pagination and filtering support.

Here is the JavaScript code I have played with:

var tableData = {
    draw: 1,
    recordsTotal: 0,
    recordsFiltered: 0,
    data: []
};
$("#datatable_auditlogs").DataTable({
    processing: true,
    serverSide: true,
    ajax: function (data, callback, settings) {
        abp.services.rioclub.auditLog.getPaged({
            skipCount: data.start,
            maxResultCount: data.length
        }).done(function (result) {
            tableData.recordsTotal = result.totalCount;
            tableData.recordsFiltered = result.totalCount;
            tableData.data = result.items;
        });
        callback(
            JSON.parse(tableData)
        );
    }
});

Above code is not working. I'll be appreciative for any help.

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
Go to accepted answer
7 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    I've no experience on datatables (while I made <a class="postlink" href="http://www.jTable.org">http://www.jTable.org</a> since datatables was hard to use :D) but your code seems incorrect. Try this:

    var tableData = {
    draw: 1,
    recordsTotal: 0,
    recordsFiltered: 0,
    data: []
};
$("#datatable_auditlogs").DataTable({
    processing: true,
    serverSide: true,
    ajax: function (data, callback, settings) {
        abp.services.rioclub.auditLog.getPaged({
            skipCount: data.start,
            maxResultCount: data.length
        }).done(function (result) {
            tableData.recordsTotal = result.totalCount;
            tableData.recordsFiltered = result.totalCount;
            tableData.data = result.items;
            callback(
                JSON.parse(tableData)
            );
        });
    }
});

    I think callback should be called when ajax done. Also JSON.parse seems unrelated but I don't how know Datatables works.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    cosmic created

    Thanks for response, but it is not working.

    As you said, DataTables is hard to use, I agree. I have some other issues with it. I found the Bootstrap Table. It is much simpler than DataTables.

    jTable is great, but it doesn't have support for Bootstrap theme and this will result on inconsistent UI style.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    hikalkan created
    Support Team

    If you are using AngularJs, I suggest Angular ui-grid (<a class="postlink" href="http://www.ui-grid.info">www.ui-grid.info</a>). I used it in ASP.NET Zero project (<a class="postlink" href="http://www.aspnetzero.com/">http://www.aspnetzero.com/</a>).

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    cosmic created

    I resolved problem with DataTables and pagination on server side.

    Here is a working code:

    var tableData = {
    draw: 0,
    recordsTotal: 0,
    recordsFiltered: 0,
    data: []
};
$("#datatable_auditlogs").DataTable({
    processing: true,
    serverSide: true,
    columns: [
        { data: 'id' },
        { data: 'tenantId' },
        { data: 'userId' },
        { data: 'serviceName' },
        { data: 'methodName' },
        { data: 'parameters' },
        { data: 'executionTime' },
        { data: 'executionDuration' },
        { data: 'clientIpAddress' },
        { data: 'clientName' },
        { data: 'browserInfo' },
        { data: 'exception' },
    ],
    ajax: function (data, callback, settings) {
        abp.services.app.auditLog.getPaged({
            skipCount: data.start,
            maxResultCount: data.length
        }).done(function (result) {
            tableData.draw = data.draw;
            tableData.recordsTotal = result.totalCount;
            tableData.recordsFiltered = result.totalCount;
            tableData.data = result.items;
            callback(tableData);
        });
    }
});
    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    hikalkan created
    Support Team

    Thanks for information sharing.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    vitor lacerda created

    Hi,

    you can try "mvc.jquery.datatables".

    <a class="postlink" href="https://github.com/mcintyre321/mvc.jquery.datatables">https://github.com/mcintyre321/mvc.jquery.datatables</a>

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    momani created

    thank you for sharing

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet