Datatable.js + POSTing数据PHP

I'm trying to setup my datatable to POST to the contents of it's rows into my PHP script so that I can store it in a database.

I have a working HTML page, which when I click "+ Add Mapping" a BS modal appears and I can add a row to the datatable.

<script>
    $(document).ready(function() {
        var t = $('#parameters_config').DataTable();
        $('#add_new_mapping').on('click', function() {
            $('#add_field_mapping').modal('hide');
            var wb_field = $("#add_field_mapping #wb_field").val();
            var adobe_field = $("#add_field_mapping #adobe_field").val();
            t.row.add([
                adobe_field,
                wb_field,
            ]).draw();
            $('#add_new_field_mapping').trigger("reset");
        });
    });
</script>

This all works perfectly. I now would like to retrieve all data rows and POST them to my script so that I can process the submitted data and store. So far, I've come up with this based on information provided:

 <script>
            $(document).ready(function() {
              $('#parameters').submit(function(event) {                   
                  var table = $('#parameters_config').DataTable();
                  var dataToSend = table
                    .rows()
                    .data();
                  console.log( 'Data', dataToSend);
                  alert( 'There are '+dataToSend.length+' row(s) of data in this table');
                  $.ajax({
                    type: 'POST',
                    url: '{$this->homeURL}',
                    data: dataToSend,
                    dataType: 'json',
                  });
              });
            });
        </script>

In my console window I see the following returned for "dataToSend" but no actual data!

[Array[2], context: Array[1], selector: Object, ajax: Object]

Where am I going wrong?

Where the examples went wrong

The two examples you linked in your post aren't really related to what you're trying to do (from what I can gather about your goal).

The first example is about how to obtain data from the server with a POST instead of the default GET, and has nothing to do with sending data to the server for some purpose.

The second example is about serverside processing, which is where you have pagination, ordering, sorting, filtering, and all other DataTables features handled in your own server code where you then send the results to the client (which is pretty complicated and unless you have a huge number of rows, unnecessary).

Therefore, remove serverSide: true!

Your Goal

What you actually want to do (I think) is send your data to a php script so that you can do something with it. This is not handled by any DataTables API call, but is a fairly simple feature to implement. All you really need is a function that will make an AJAX call that will send the data to the script.

Solution

The way you can do this is by obtaining the data with the t.data() API call, and then sending it with an ajax request. It might look like this:

function sendData(){
    var dataToSend = t.data();
    $.ajax({
        type: 'POST',
        url: 'URL OF SCRIPT HERE',
        data: dataToSend
    });
}

Then you simply have to call sendData() whenever it is that you want to send the data. Of course, you'll have to ensure that your controller handles the data correctly, but that's a different matter entirely.