Rendering data issue in JQuery Datatable with Spring MVC controller

Question

I am getting JSON Perfectly with response code : 200 Ok, But data is not getting rendered in table, Their might be some problem in binding, Please see following :

From FireBug:

POST

Parametersapplication/x-www-form-urlencoded
bRegex  false
bRegex_0    false
bRegex_1    false
bSearchable_0   true
bSearchable_1   true
bSortable_0 true
bSortable_1 true
iColumns    2
iDisplayLength  10
iDisplayStart   0
iSortCol_0  0
iSortingCols    1
mDataProp_0 0
mDataProp_1 1
sColumns    
sEcho   1
sSearch 
sSearch_0   
sSearch_1   
sSortDir_0  asc

Response:

{"sEcho": 1,"iTotalRecords": 2,"iTotalDisplayRecords": 2,"aaData": [{"name": "Sandeep1","mark": "201"},{"name": "Sandeep2","mark": "202"}]}

JSON:

sEcho   1 
iTotalRecords   2 
iTotalDisplayRecords 2 
aaData  [Object { name="Sandeep1", mark="201"}, Object { name="Sandeep2", mark="202"}]
0   Object { name="Sandeep1", mark="201"}
1   Object { name="Sandeep2", mark="202"}

JSP View:

     <div class='table-container'>
    <table  cellpadding='0' cellspacing='0' border='0'  class='display jqueryDataTable'>
   <thead>
    <tr>
       <th>Name</th>
     <th>Mark</th>
    </tr>
   </thead>
   <tbody>
   </tbody>
   </table>
   </div>
    <script type="text/javascript">    

        jQuery(document).ready(function() {
                  jQuery('.jqueryDataTable').dataTable( {
                'bProcessing': true,
                "bServerSide": true,
                'sAjaxSource': '<jsp:expression>contextPath</jsp:expression>/ajaxDatatable1',
                'bJQueryUI': true,
                "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
                    debugger;
                    alert("data in fnServerData : "+ aoData);
                    oSettings.jqXHR = $.ajax( {
                      "dataType": 'json',
                      "type": "POST",
                      "url": sSource,
                      "data": aoData,
                      "success": fnCallback
                    } );
                  },
               'aoColumns': [
                    { 'mData': 'name'},
                    { 'mData': 'mark'}
                 ]
            } );   
        } );
        </script>

Javascript ERROR:

DataTables warning (table id = 'DataTables_Table_0'): Requested unknown parameter '0' from the data source for row 0

Please point me in right direction. Thanks

Hello here is a similar problem as yours : stackoverflow.com/questions/11472075/… — Bertrand Martel
– Bertrand Martel, Commented Jul 26, 2013 at 3:15
@Akinaru i saw this earlier but again this time you gave me hint. thanks i got it working. it was just aaData(sent json) and mData ('aoColumns') mismatch. — Navdeep Singh
– Navdeep Singh, Commented Jul 26, 2013 at 3:34
@Akinaru Can you explain why we need to send json data in aaData( json.aaData = [['1','1','1','1'],['2','2','2','2']] ) and receive in mDataProp. — Navdeep Singh
– Navdeep Singh, Commented Jul 26, 2013 at 3:43

Bertrand Martel · Accepted Answer · 2013-07-26 03:54:04Z

1

aaData is the array of object that you pass.

aoColumns define which column should receive the data.

mDataProp indicate the way data would be treated (if you give a string to it, it will treat data as String)

You have much more information on : http://datatables.net/ref#

answered Jul 26, 2013 at 3:54

Bertrand Martel

46k17 gold badges156 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Navdeep Singh Over a year ago

thats ok but on given url "mDataProp" is not present instead they have mData ??

Bertrand Martel Over a year ago

I think this is an option that is here for backward compatibilities with former versions but I am not sure.

Collectives™ on Stack Overflow

Rendering data issue in JQuery Datatable with Spring MVC controller

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related