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.

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.

  • 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.

  • 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>).

  • 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);
        });
    }
});
  • User Avatar
    0
    hikalkan created
    Support Team

    Thanks for information sharing.

  • 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>

  • User Avatar
    0
    momani created

    thank you for sharing

Assignee
No one
Labels
Non yet