How to pass the ajax result data into jquery datatable

Question

I want to pass the result data of ajax page to jquery datatable function,Please suggest me the correct syntax how to pass the result into the datatable function:

function getResultsMsr(action, msrDel) {
            if(action == 'search') {
            $.ajax({
                     url: 'getResult.php',
                       type: 'POST',
                       data: {
                             formName:'afscpMsr',
                            action:'search',
                            field_nm: document.getElementById('msrdet').value,
                             field_value:document.getElementById('srhmsr').value    
                         }
                      }).done(function(result_data){

                          var  data= result_data;
                          $('#example').dataTable( {
                            "processing": true,
                            "serverSide": true
                    });

                    });

Table which is diplay the data and column name is:

   <table id="example" class="display" cellspacing="0" width="100%" >
                    <thead>
                         <tr>
                           <th>Customer Name</th>
                           <th>Feature Order No</th>
                           <th>NCP Account Number</th>
                           <th>Mcn Code</th>
                           <th>Sales Person</th>
                          <!--  <th>Due Date</th> --> 
                           <th>Status</th>
                            <th>MSR Id</th>
                            <th>Action </th>

                        </tr>
                    </thead>
                 </table>

Ajax page which passes the result to be displayed in datatable ,this result is in json format :

  if($_POST['action'] == 'search')
  {
    $col_nm = $_POST['field_nm'];
    $srch_val = $_POST['field_value'];
     if($srch_val == 'Yes') {
         $srch_val = 'Y';
     } elseif ($srch_val == 'No'){
        $srch_val = 'N';
    }
    $result = $afscpMsrMod->getMsrDetails($col_nm, $srch_val,$page,$start);
    $totalCont = $afscpMsrMod->getTotalCountOfMsrDetails($col_nm, $srch_val);
    $totalCont= ceil($totalCont/10);
    $newarray = array(
        "draw"            => intval( ""),
        "recordsTotal"    => intval($totalCont ),
        "recordsFiltered" => intval( $totalCont ),
        "data"            => json_encode($result[0])
    );
    echo json_encode($newarray);

follow the examples on dataTables site. You need to refine your initialization options — charlietfl
– charlietfl, Commented Aug 14, 2014 at 12:45

Community · Accepted Answer · 2017-05-23 12:20:50Z

0

Hey you can use in this way


    var opts =
        {
            'ajax'    :
            {
                'url': 'serverSideTableProviderPage',
                'type': 'POST',
                'contentType': 'application/json; charset=utf-8',
                'data':function(data)
                 {
                       return data = JSON.stringify(data);
                 }
            },
            'pagingType': 'simple',
            [more options ...]
        }
    $('table').dataTable(opts);

For more info visit

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Aug 14, 2014 at 13:25

khanz

2031 silver badge10 bronze badges

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

3 Comments

chaya Over a year ago

I have to pass the data parameters to ajax call : data: { formName:'afscpMsr', action:'search', field_nm: document.getElementById('msrdet').value, field_value:document.getElementById('srhmsr').value }

chaya Over a year ago

How to pass the data parameter to ajax call example action:search,field_nm: document.getElementById('msrdet').value

chaya Over a year ago

Please suggest me the answer

SSA · Accepted Answer · 2014-08-14 12:46:32Z

Did you try using aaData property:

Here you can find information abour various data sources for datatables:

JS array as datasource in datatables

Server side data processing

Ajax source

DOM zero configuration

 function getResultsMsr(action, msrDel) {
        if(action == 'search') {
        $.ajax({
                 url: 'getResult.php',
                   type: 'POST',
                   data: {
                         formName:'afscpMsr',
              function getResultsMsr(action, msrDel) {
        if(action == 'search') {
        $.ajax({
                 url: 'getResult.php',
                   type: 'POST',
                   data: {
                         formName:'afscpMsr',
                        action:'search',
                        field_nm: document.getElementById('msrdet').value,
                         field_value:document.getElementById('srhmsr').value    
                     }
                  }).done(function(result_data){

                      var  data= result_data;
                      $('#example').dataTable( {
                        "processing": true,
                        "serverSide": true,
                        "aaData":data
                });

                });          action:'search',
                        field_nm: document.getElementById('msrdet').value,
                         field_value:document.getElementById('srhmsr').value    
                     }
                  }).done(function(result_data){

                      var  data= result_data;
                      $('#example').dataTable( {
                        "processing": true,
                        "serverSide": true
                });

                });

I have check these above links , but they havent mention the data parameter passing in ajax call.

Collectives™ on Stack Overflow

How to pass the ajax result data into jquery datatable

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related