Dynamic title column by dataSrc

Patricia_C

Hi
I been working on a feature which the titles has to be dynamic created . The titles depends what data return from the server. I tried to set the data for aoColumns in dataSrc funtion ,but i kept running into aDataSort of undefined. Couldn't even debugger in the function.

Is any way that i can dynamic the titles?

data from server side

data:[{
couponName:'CType1',
couponPrice:'1000',
paymentId:'111111-111111-111111',
SignupUserInfoList:[
{ columnName:'Name',columnValue:'Peter'},
{ columnName:'Number',columnValue:'0978123456'},
{ columnName:'Email',columnValue:'Peter123@gmail.com'}],
}]

reset data in dataSrc function

columns=[
{ sTitle:'Name',mData:'Peter'},
{ sTitle:'Number',mData:'0978123456'},
{ sTitle:'Email',mData:'Peter123@gmail.com'}],
]

HTML
<table id="displayTable" class="table table-bordered table-hover" width="100%"></table>

JS

 $('displayTable').dataTable({
        "language": cn_dataTable,
        "destroy": true,
        "autoWidth": true,
        "searching": false,
        "serverSide": true,
        "processing": true,
        "bSort": false,
        "sAjaxDataProp": "columnDatas",
        "ajax": {
            "url": " ",
            "type": "POST",
            "dataSrc": function (json) {
                if (json.data.length > 0) {
                    var cValue = '';
                    for (var x = 0; x < json.data.length; x++) {
                        if (json.data[x].SignupUserInfoList.length > 0) {
                            var sLength = json.data[x].SignupUserInfoList.length;
                            for (var y = 0; y < sLength; y++) {
                                var title = json.data[x].SignupUserInfoList[y].columnName;
                                var value = json.data[x].SignupUserInfoList[y].columnValue;                                                          
                                column = { "sTitle": title , "mData": title},
                                columns.push(column);
                                columnDatas.push(value);
                            }
                            dataSet.push(columnDatas);
                        }
                    }
                }
                return columnDatas;
            },
            "data": { oNo: "" }
        },
        "aoColumns": column,
        "aaData": columnDatas
})

Thank you

Ankesh0601

Hi,

I wanted to create dynamic data table whatever i have received in JSON, Can any one help me out how do i create ...? And want to have same title what we have like KEY : VALUE So, Key would be my Header..

below is my JSON :

Exit : {
"iTotalRecords": 10,
"iTotalDisplayRecords": 10,
"aaData": [
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
},
{
"RFP_NAME": "Opportunity 9/7/2016",
"UNIQUE_ID": "10012005;Charter;Fiber;Use;Individual;CATV"
}
]
}

kthorngren

Maybe this example will help you get started:
http://live.datatables.net/huyexejo/1/edit

Kevin

Ankesh0601

Hi Kevin, Thank you for your help but below is my java code where i am sending below parameter for pagination

@RequestMapping(value="/customeReport", produces = "application/json", method = RequestMethod.GET)
public @ResponseBody String customeReport(@RequestParam String colname, HttpServletRequest request) {

    System.out.println("Enter : customeReport :"+colname);

    Integer pageNumber = 0;

    if (null != request.getParameter("iDisplayStart"))
        pageNumber = (Integer.valueOf(request.getParameter("iDisplayStart")) / 10) + 1;

    String iDisplayStart = request.getParameter("iDisplayStart");
    String searchParameter = request.getParameter("sSearch"); 
    Integer pageDisplayLength = Integer.parseInt(request.getParameter("iDisplayLength"));
    ArrayList<HashMap<String, Object>>  bean = service.getCustomisedColumn(Integer.valueOf(iDisplayStart), pageDisplayLength, searchParameter, colname);

    List<HashMap<String, Object>> append = new ArrayList<HashMap<String, Object>>();
    append.addAll(bean);

    CustomisedJsonObject dataTable = new CustomisedJsonObject();
    dataTable.setiTotalDisplayRecords((long) bean.size());
    dataTable.setiTotalRecords((long) bean.size());
    dataTable.setAaData((ArrayList<HashMap<String, Object>>) append);

    Gson gson = new GsonBuilder().setPrettyPrinting().create();
    String json = gson.toJson(dataTable);

    System.out.println("Exit : " + json);
    return json;

}

And below is my Data table :

var table = $('#custome-dataTables-example').DataTable({

                  "scrollY": 500,
                  "scrollX": true,
                  "bSort" : false,
                  "bProcessing" : true,
                  "bServerSide" : true,
                  "sAjaxSource" : "customeReport?colname="+str,
                  "dom": "lfrti",
                  "fnDrawCallback" : function() { },


                     "aoColumns" : [{

                        //"sTitle" : "UNIQUE_ID",
                        "mData" : "UNIQUE_ID",
                        "defaultContent " : "<i>Not set</i>"

                    }, {

                        //"sTitle" : "RFP_NAME",
                        "mData" : "RFP_NAME",
                        "defaultContent " : "<i>Not set</i>"
                    },

                    {

                        "mData" : "CRAN_LIT_TOTAL_SPEND_Y1_Y5",
                        "defaultContent " : "<i>Not set</i>"
                    }]  

            });  

So now still it will work a code which you have given

kthorngren

I don't know about the Java code. But with server side processing enabled you will need to use an ajax request to get the column info before you initialize Datatables in the success function. It would be similar to the above example except you would use a URL to return just the column info. And keep the sAjaxSource option configured in your Datatable init code.

Kevin

Ankesh0601

Hi Kevin, Thank you it is working but how do i sAjaxResource on Data table because my method is get, also at the time of request i am sending iDisplayStart and iDisplayLength in my controller but now it is not possible becuse on success we calling datatale

Kindly help me out how do i add iDisplayLength, iDisplayStart,sAjaxResource in the given example..?