Send jquery Datatable data to php

DjFrex

Hi everyone!
I have a jquery wizard in which I have a datatable where I can select some rows to send them to a form to "Create a new meeeting".

The problem is that when I try to submit the data to the form with Ajax, all data of datatable are sent, including info about the datatable and not just the values that I have selected.

In addition to this, how can I then fetch the data in the php itself? It will simply be $data = $_POST['data']?

My form is set in this way:

<div class="wizard-container">
 <div class="card wizard-card" data-color="red" id="wizardProfile">
  <form id ="create_meeting_form" action="create_meeting.php" method="post">
   <div class="wizard-header">
    <h3 class="wizard-title">Create new meeting</h3>
   </div>
  <div class="wizard-navigation">
   <ul>
    <li><a href="#partecipants" data-toggle="tab">Partecipants</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
   </ul>
  </div>

  <div class="tab-content">
   <div class="tab-pane" id="about">
    <div class="row">
     <div class="col-sm-10 col-sm-offset-1">
      <div class="input-group">
       <span class="input-group-addon">
        <i class="material-icons">face</i>
       </span>
        <div class="form-group label-floating">
         <label class="control-label">Title <small>(required)</small></label>
          <input name="firstname" type="text" class="form-control">
        </div>
       </div>
       <div class="input-group">
        <span class="input-group-addon">
         <i class="material-icons">record_voice_over</i>
        </span>
        <div class="form-group label-floating">
         <input name="lastname" type="date" class="form-control">
        </div>
       </div>
       <div class="input-group">
        <span class="input-group-addon">
         <i class="material-icons">record_voice_over</i>
        </span>
       <div class="form-group label-floating">
        <input name="lastname" type="time" class="form-control">
       </div>
      </div>
      <div class="input-group">
        <span class="input-group-addon">
          <i class="material-icons">face</i>
        </span>
      <div class="form-group label-floating">
       <label class="control-label">Address <small>(required)</small></label>
        <input name="firstname" type="text" class="form-control">
      </div>
     </div>
    </div>
   </div>
  </div>

  <div class="tab-pane" id="partecipants">
   <h4 class="info-text"> Who would you like to invite? </h4>
    <div class="row">
     <div class="col-sm-10 col-sm-offset-1">
    <div>
   <table class="table table-hover" id="meeting_partecipant_table">
   <thead>
     <tr>
       <th><input type="checkbox" name="select_all" value="1" id="example-select-all_partecipant"></th>
       <th>Name</th>
       <th>Company</th>
       <th>Role</th>                                    
     </tr>
   </thead>
  </table>
 </div>             
</div>
</div>
</div>

</div>
<div class="wizard-footer">
<div class="pull-right">
<input type='button' class='btn btn-next btn-fill btn-success btn-wd' name='next' value='Next' />
<input type='submit' class='btn btn-finish btn-fill btn-success btn-wd' name='finish' value='Finish' />
</div>

<div class="pull-left">
<input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
</div>
<div class="clearfix"></div>
</div>

I then have a js called tables.js that does this:

$(document).ready(function () 
{ //Get data for meetings table located in dashboard.php
                var table = $("#meeting_partecipant_table").DataTable(
                  {
                    "sAjaxSource": "data_new_meeting_table.php",
                      columnDefs: 
                      [ {
                          targets:   0,
                          orderable: false,
                          sortable: false,
                          className: 'select-checkbox'  ,
                          id: 'check'                  
                        } 
                      ],
                    select: {
                    style:    'os',
                    style: 'multi'
                    },
                    // da dove prende i dati
                      "aoColumns": 
                      [
                        { 
                          "data": null,
                          "defaultContent": "" 
                        },
                        { "mData": "Name"},
                        { "mData": "Company" },
                        { "mData": "Role"},
                      ],
                      'order': [[1, 'asc']]
                  });



                      $('#example-select-all_partecipant').on('click', function(){   
                      // Get all rows with search applied  
                      var rows = table.rows({ }).nodes();
                      alert( 'The table has '+rows.length+' records' );

                      // Check/uncheck checkboxes for all rows in the table
                      var rows = table.rows( { selected: false } ).prop('checked', true);
                      });


   $('#create_meeting_form').on('submit', function(e){
    e.preventDefault();
    var form_data = $('#create_meeting_form').serializeArray();
    var data = table.rows( { selected: true } ).data();
    console.log(data);
    var name = data.Company;
    console.log(name);
    form_data[form_data.length] = { name: "data", value: JSON.stringify(data) };
    //console.log(form_data);
      //console.log(data.length);
      //var count = table.rows( { selected: true } ).count();
      //alert(count);
      $.ajax({
              url: 'create_meeting.php',
              method: 'post',
              data: form_data,
              success: function(data)
              {
                alert("success");
              }
          });

   });                      

});

Any help?
Please excuse me if I forgot some closing tag somewhere

allan

That looks like the data from the selected rows should be in the form_data object with the name data. If that isn't working for you, please link to a test case showing the issue.

Allan

DjFrex

allan can you explain me better what I have to do?
You mean I have to set the table in this way?:

"aoColumns":
                      [
                        {
                          "data": null,
                          "defaultContent": ""
                        },
                        { "form_data": "Name"},
                        { "form_data": "Company" },
                        { "form_data": "Role"},
                      ],