jQuery UI Widgets Forums DataTable jqxdatatable serverprocessing with dynamic columns

This topic contains 6 replies, has 2 voices, and was last updated by  SJ 3 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • SJ
    Participant

    Hi,

    Is there any way i can do serverprocessing with dynamic columns in jqxdatatable. like

    I can get the columns and rows dynamically through ajax function and process dataFields using below code:
    var json = xhr.responseText;
    var obj = $.parseJSON(json);
    var columns = obj.columns;
    var rows = obj.rows;

    var datafields = new Array();
    for (var i = 0; i < columns.length; i++) {
    datafields.push({
    name : columns[i].datafield
    });
    }

    But the problem is “Source” Object I dont know what value i need to put in source so i can process dataAdapter & next pager button will read the source and hit the server again to get more records.
    source = {
    dataType : “json”,
    datafields : datafields,
    url : “readDatViewFile.do”
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
    formatData : function(data) {
    return data.rows;// returns null object
    },
    downloadComplete : function(data, status, xhr) {
    if (!source.totalRecords) {
    source.totalRecords = data.rows.length;
    }
    }
    });

    $(“#viewDataTable”).jqxDataTable({
    width : ‘99%’,
    theme : ‘bootstrap’,
    autoRowHeight : true,
    altRows : true,
    height : “98%”,
    columnsHeight : 50,
    source : dataAdapter,
    sortable : true,
    editable : false,
    columnsResize : true,
    columns : columns,
    pageable : true,
    pageSize: 100,
    pagerButtonsCount : 5,
    serverProcessing : true,
    filterable : true,
    filterMode : ‘simple’

    });

    Thank you in advance for help!

    SJ


    Hristo
    Participant

    Hello SJ,

    Please, take a look at this demo:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-server-paging.htm?light
    You need to set:

    data.$skip = data.pagenum * data.pagesize;
    data.$top = data.pagesize;
    data.$inlinecount = "allpages";

    (in the formatData callback)

    About “how to change columns dynamically” – I would like to suggest you look at this forum topic:
    http://www.jqwidgets.com/community/topic/jqxdatatable-column-dynamically-reload-and-change-issue/#post-54000

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 3 years, 6 months ago by  Hristo.

    SJ
    Participant

    Thank you Hristo for quick reply.

    I followed as you suggested but in dataAdapter , datafield is empty (i saw in debug mode) thats the reason my table is empty. Please correct me where I am wrong.

    Note:- Columns and datafield are generated dynamically. I dont know how many columns, rows and dataField will be there in my dynamic datatable. In other words, datatable is generated on fly with serverPRocessing so when user will do sorting, filtering it will hit the server to get more data.

    Please help!
    Thanks,

    var datafields = new Array();
    source = {
    dataType : “json”,
    datafields : datafields,
    url : “readDatViewFile.do”,
    beforeprocessing : function(data) {
    columns = obj.columns;
    rows = obj.rows;
    for (var i = 0; i < columns.length; i++) {
    datafields.push({
    name : columns[i].datafield
    });
    }
    }

    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
    formatData : function(data) {
    data.$skip = data.pagenum * data.pagesize;
    data.$top = data.pagesize;
    data.$inlinecount = “allpages”;

    return data;
    },
    downloadComplete : function(data, status, xhr) {
    if (!source.totalRecords) {
    source.totalRecords = data.rows.length;
    }
    },
    loadError : function(xhr, status, error) {
    throw new Error(“http://services.odata.org: ” + error.toString());
    }
    });

    $(“#viewDataTable”).jqxDataTable({
    width : ‘99%’,
    theme : ‘bootstrap’,
    autoRowHeight : true,
    altRows : true,
    height : “98%”,
    columnsHeight : 50,
    source : dataAdapter,
    sortable : true,
    editable : false,
    columnsResize : true,
    columns : columns,
    pageable : true,
    pageSize : 100,
    pagerButtonsCount : 5,
    serverProcessing : true,
    filterable : true,
    filterMode : ‘simple’

    });


    Hristo
    Participant

    Hello SJ,

    The “beforeprocessing” is the same as “downloadComplete” (please, refer to this topic).
    You could try without set dataFields field in the source and this will automatically generate all data fields.
    I would like to ask you is there any error message?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    SJ
    Participant

    Hi Hristo,

    Finally i am able to populate the table but still unable to load dynamic columns. when i hard code the columns, it works but not the dynamic way.
    Please suggest!
    Thanks,
    SJ
    json:
    readDatViewFilejsonArray{
    “columns”: [{
    “datafield”: “PATCD”,
    “text”: “PATCD”,
    “width”: 100
    },
    {
    “datafield”: “AETERM”,
    “text”: “AETERM”,
    “width”: 100
    },
    {
    “datafield”: “AEBODSYS”,
    “text”: “AEBODSYS”,
    “width”: 220
    }],
    “rows”: [{
    “PATCD”: “0”,
    “AETERM”: “0001”,
    “AEBODSYS”: “1”
    },
    {
    “PATCD”: “1”,
    “AETERM”: “0002”,
    “AEBODSYS”: “2”
    },
    {
    “PATCD”: “0”,
    “AETERM”: “0004”,
    “AEBODSYS”: “1”
    }]
    }


    Code:

    var source = {
    dataType : “json”,
    url : “readDatViewFile.do”
    };
    var columns;

    var dataAdapter = new $.jqx.dataAdapter(source, {
    formatData : function(data) {
    data.$skip = data.pagenum * data.pagesize;
    data.$top = data.pagesize;
    data.$inlinecount = “allpages”;
    return data.rows;
    },
    downloadComplete : function(data, status, xhr) {
    if (!source.totalRecords) {
    source.totalRecords = data.rows.length;
    }
    },
    loadError : function(xhr, status, error) {
    throw new Error(“http://services.odata.org: ” + error.toString());
    },
    beforeLoadComplete : function(records, original) {
    columns = original.columns;
    return original.rows;
    }
    });

    $(“#viewDataTable”).jqxDataTable({
    width : ‘99%’,
    theme : ‘bootstrap’,
    autoRowHeight : true,
    altRows : true,
    height : “98%”,
    columnsHeight : 50,
    source : dataAdapter,
    sortable : true,
    editable : false,
    columnsResize : true,
    columns : columns,//not work:dynamic
    columns : [ {//worked
    text : ‘PATCD’,
    dataField : ‘PATCD’,
    width : 100,
    filterable : false,
    editable : false
    }, {
    text : ‘AETERM’,
    dataField : ‘AETERM’,
    width : 100,
    editable : false
    } ],

    pageable : true,
    pageSize : 100,
    pagerButtonsCount : 5,
    serverProcessing : true,
    filterable : true,
    filterMode : ‘simple’

    });


    Hristo
    Participant

    Hello SJ,

    Try with this $("#viewDataTable").jqxDataTable({ columns: columns }); when you want to change the columns.
    Also, you could check this variable (columns) is not empty before you set it.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    SJ
    Participant

    Thank you Hristro! it works!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.