How can I load table column headings and data from server using ajax ?

robert909

Hi There,

I have a requirement where a user has an option to select a set of columns (say 3 columns out of 10 available columns) and when click of a button, the table should load data for those selected 3 columns and their table column headings from the the server, using Ajax. I'm using columnDef for this and having json as below -

{"aaData":[],"aoColumnDefs":[{"aTargets":"0","mDataProp":"projectName","sTitle":"Project Name","bVisible":true,"bSearchable":true},{"aTargets":"1","mDataProp":"projectStatus","sTitle":"Project Status","bVisible":true,"bSearchable":true}],"data":[{"projectName":"Test Project 3","projectStatus":"No Status","projectUrl":null,"projectId":"4"},{"projectName":"Test Project 12","projectStatus":"On Track","projectUrl":null,"projectId":"8"},{"projectName":"Test Project 5","projectStatus":"Minor Impact","projectUrl":null,"projectId":"7"},{"projectName":"Test Project 1","projectStatus":null,"projectUrl":null,"projectId":"2"},{"projectName":"Test Project 4","projectStatus":"Minor Impact","ccDate":null,"projectUrl":null,"projectId":"5"},{"projectName":"Test Project 2","projectStatus":"No Status","projectUrl":null,"projectId":"3"}]}

I'm trying with some options here but I couldn't succeed. Have anyone tried it before or Is this possible to load the column headings from the server over ajax ?

Many thanks for your time and help here. Any sample code will be much appreciated.

Thanks

travelerjjm

Is ColVis what you want? http://www.datatables.net/extensions/colvis/

robert909

@travelerjjm Thank you for your response. I tried using this plugin and my requirement is sort of complicated in the sense that, the table should display columns as user selected and the user has option to choose in which order the columns has to display in the table. During the early phase of development, I used a simple javascript function to turn on / off the column visible option on the table, but later when the other features (such as give user option to sort and the table should auto apply columnfilter on each added column) added, the performance sucked (browser hangs all the time). So, I decided to have the server send data in the user selected columns & order, so that it will be a simple ajax load of data with col headings to minimize load on the browser. I have 34 columns ( I know it sounds strange but have to deal with this) and user can chose all or a couple from this list.

I'm using the below plugins for my requirments and appreciate if you can shed any light on how effectively this can be done -

dataTables.colReorder.js

dataTables.tableTools.min.js

jquery.dataTables.columnFilter.js

Many thanks for your time and your comments here.

robert909

Ok.. I made it to work this way. For some reason, I think there is another way using datatables inbuilt ajax function to do the same as am doing here..

$.ajax( {
            //"dataType": 'json',
            "type": "GET",
            "url": "${pageContext.request.contextPath}/dashboard/ajax/loadprojects",
            "success": function (dataStr) {

                oTable = $('#currentProjects-table')
                .dataTable({
                    "aoColumns": dataStr.aoColumnDefs,
                    "data" : dataStr.data,
                            "aLengthMenu" : [
                                    [ 1, 5, 10, 25, 50, 100, -1 ],
                                    [ 1, 5, 10, 25, 50, 100, "All" ] ],
    "iDisplayLength" : 25,
    "bAutoWidth" : false,
    "sDom" : '<"row"<"col-xs-2"l><"col-xs-4 filter_templates"><"col-xs-2 save_filter_template"><"col-xs-2"f><"col-xs-1 hide_unhide_table_fitler"><"col-xs-1 saveas_div align-right"T>r>t<"row"<"col-xs-6"i><"col-xs-6"p>>',
                            "oTableTools" : {
                                "aButtons" : [ {
                                    "sExtends" : 'csv',
                                    "sButtonText" : 'Export as CSV',
                                    "mColumns" : "visible"
                                } ]
                            },

                            "bStateSave" : false,
                            "fnStateSave" : function(oSettings, oData) {
                                localStorage.setItem('DataTables_'
                                        + window.location.pathname, JSON
                                        .stringify(oData));
                            },
                            "fnStateLoad" : function(oSettings) {
                                return JSON
                                        .parse(localStorage
                                                .getItem('DataTables_'
                                                        + window.location.pathname));
                            }

                            ,
                            "fnDrawCallback" : function(oSettings) {

                                console.log('counter >>>>>>>>>>>>'+counter);

                                counter ++;

                            }
                    });
            }
        } );

Hope it helps somebody..!!