Populate a datatbale with selected rows from another datatble

Khalid Teli · August 2020

I am using Editor
I have two different datatbles promotions_index table and promotions_forms table in database. I want the the promotions_index table to be inserted with the rows pre-populated in promotions_forms.

I saw this link : http://live.datatables.net/koxezeyu/1/edit but the problem is that my tables are on two different pages not inside one script

What I am trying to do is that, capturing the data and sending it to the server, from where I can insert in another table.
the **console.log(abc);
** is showing me no data and I dont know why

        var abc = table.rows().data().toArray();
     // console.log(abc);

     $.ajax({
            type: 'POST',
            url: 'my.txt',
            dataType: 'json',
            data: {json: JSON.stringify(abc)},
            success: function (data) {
                alert(json);
                console.log(json);
            }
        });

Can you please give me an idea how can I do it ?

kthorngren · August 2020

console.log(abc);

What is the result?

You haven't shown enough code for us to help debug the problem. Best thing is to provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Khalid Teli · August 2020

@kthorngren Thanks for the prompt reply.

console.log(abc) displays an empty array like this** []**. However, the datatable gets populated successfully

My problem is that I have two tables inside one database and I want to insert the rows from table-1 into table-2 based on some conditions.

Something similar to this http://live.datatables.net/koxezeyu/1/edit but my issue is that I am just displaying one Datatable on one page.

I am not sure how to replicate it when you have data coming from the database? I will look into it and try to make one. Thank you

kthorngren · August 2020

console.log(abc) displays an empty array like this** []**. However, the datatable gets populated successfully

Possibly you are using var abc = table.rows().data().toArray(); before Datatables is populated via the ajax request. Are you using var abc = table.rows().data().toArray(); inside a click event?

Kevin

Khalid Teli · August 2020

@kthorngren
No, it is not inside click event . please find my code below.

<!DOCTYPE html>
<html>
<head>
  <title>Promotion Forms</title>
<link rel="stylesheet" href="style.css">
</head>

<body >


    <div id="container" class="new">

        <center> <h1 style="background-color:silver;"><b>Promotions</b></h1> </center>

            <center> <button class="toggleCols" data-column="2">Populate Chart</button> </center>


            <table id="promotions_forms"  class="table-bordered display nowrap cell-border compact  mytables " cellspacing="0" style="width:100%">
            <thead>

        <tr>

        <th class="rotate"><div><span>Form ID</span></div></th>
    <th class="rotate"><div><span>Product Code</span></div></th>
         <th class="rotate"><div><span>Outer Barcode</span></div></th>
         <th class="rotate"><div><span>Prod Desp.</span></div></th>


        <th class="rotate"><div><span>Pack Size</span></div></th>
        <th class="rotate"><div><span>Standard Cost</span></div></th>
         <th class="rotate"><div><span>Bonus</span></div></th>
         <th class="rotate"><div><span>Net Cost</span></div></th>
          <th class="rotate"><div><span>Retro Bonus</span></div></th>
         <th class="rotate"><div><span>Retro SalesIn</span></div></th>
         <th class="rotate"><div><span>Retro SalesOut</span></div></th>
         <th class="rotate"><div><span>Telesales Deal</span></div></th>
         <th class="rotate"><div><span>Customer Offer</span></div></th>
         <th class="rotate"><div><span>Buying In</span></div></th>
          <th class="rotate"><div><span>Selling Out</span></div></th>
         <th class="rotate"><div><span>Deadline</span></div></th>
         <th class="rotate"><div><span>Supplier</span></div></th>
         <th class="rotate"><div><span>Month</span></div></th>
         <th class="rotate"><div><span>Entry Time</span></div></th>
          <th class="rotate"><div><span>Execution</span></div></th>

         <th class="rotate"><div><span>Product Name</span></div></th>


        </tr>

            </thead>

                    </table>
    </div>      
</body>
</html>

<script type="text/javascript" language="javascript">

var editor; // use a global for the submit and return data rendering in the promotionss


$(document).ready(function() {

// function for using column filtering 
function filterColumn ( i ) {
    $('#promotions').DataTable().column( i ).search(
        $('#col'+i+'_filter').val()
    ).draw();
}
editor = new $.fn.dataTable.Editor( {
    "ajax": "../../controllers/promotions_fetch.php",
    "table": "#promotions_forms",
    "fields": [ {
        "label": "Promotion ID:",
        "name": "promotions_forms.form_id"
      }, {
        "label": "Outer Barcode:",
        "name": "promotions_forms.outer_barcode"
      },
      {
        "label": "Execution:",
        "name": "promotions_forms.execution",
        "type": "select",
         options: [{
        label: "CORE FEATURE",
        value: "CORE FEATURE"
    }, {
        label: "FLEXIBLE",
        value: "FLEXIBLE"
    }, {
        label: "LOCAL",
        value: "LOCAL"
    },
    {
        label: "",
        value: ""
    }]
      }
    ]
  } );


 $('#promotions_forms').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );



    var table = $('#promotions_forms').DataTable( {


        "processing": true,
        "serverSide": true,
        "paging":   false,
         "scrollY":"800px",
          "scrollX":"100%",
          "scrollCollapse": true,

      "ordering": [],
      "stateSave": false,
        "info":   true,
        "dom": 'Bfrtip',
        "ajax":

         {
            url:"../../controllers/promotions_fetch.php",
            type:'POST'
    },



        "columns": [


     { data: "promotions_forms.form_id" },
      { data: "promotions_forms.product_code" },
      { data: "promotions_forms.outer_barcode"},
    { data: "promotions_forms.prod_desp" },
      { data: "promotions_forms.pack_size" },
      { data: "promotions_forms.std_cost" },
      { data: "promotions_forms.bonus"},
      { data: "promotions_forms.net_cost" },
      { data: "promotions_forms.retro_bonus" },
      { data: "promotions_forms.retro_sales_in" },
      { data: "promotions_forms.retro_sales_out"},
      { data: "promotions_forms.telesales_deal" },
      { data: "promotions_forms.cust_offer" },
      { data: "promotions_forms.buying_in" },
      { data: "promotions_forms.selling_out"},
      { data: "promotions_forms.deadline" },
      { data: "promotions_forms.supplier" },
      { data: "promotions_forms.month"},
      { data: "promotions_forms.entrytime" },
      { data: "promotions_forms.execution" },
      { data: "products.product_name" }

        ],
      select: {
            style:    'os',
            selector: 'td:first-child'
        },
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
]

});


    var abc = table.rows().data().toArray();
  console.log(abc);
$.ajax({
       type: 'POST',
       url: 'my.txt',
       dataType: 'json',
       data: {json: JSON.stringify(abc)},
       success: function (data) {
           alert(json);
           console.log(json);
       }
    }); 


});

</script>

Khalid Teli · August 2020

@kthorngren update , when I put it inside click event it works fine, the array is populated with data and I can see it in console.log. However, it doesn't get saved in 'my.txt' file which I have given in** url: 'my.txt'**

$('.toggleCols').click(function () {
 var abc = table.rows().data().toArray();
 console.log(abc);

$.ajax({
       type: 'POST',
       url: 'my.txt',
       dataType: 'json',
       data: {json: JSON.stringify(abc)},
       success: function (data) {
           alert(json);
         console.log(json);
       }
    });

});

Khalid Teli · August 2020

@kthorngren please ignore my above two comments.

I have a latest update:

I got what I am trying to do :

1) reading the rows from data table based on search applied
2) passing that data to the server using:

    $('.toggleCols').click(function () {
     var abc = table.rows({search:'applied'}).data().toArray();
     //console.log(abc);

    $.ajax({
           url: 'server.php',
          data:  {json: JSON.stringify(abc)},
           success: function (data) {
               alert(data);
             console.log('Server response', data);
           }
        });

    });

3) on server.php I can read all the data and I validated it using url-encoded json tool

**4) The issue now is , how can I retrieve that data (from url encode) and fill another table under same database? **

Your help is highly appreciated

allan · August 2020

I'd suggest you add type: 'post' into your $.ajax object. Then on the server-side you would use:

$data = json_decode( $_POST['json'] );

from there, how you insert it into the database is up to you.

Allan

Khalid Teli · August 2020

@allan Thanks I managed to solve my problem.
Received the data via $data = json_decode( $_POST['json'] ); and inserted the JSON format data in MySQL database with php

Populate a datatbale with selected rows from another datatble

Populate a datatbale with selected rows from another datatble

Answers

Howdy, Stranger!

Categories

DataTables

Populate a datatbale with selected rows from another datatble

Populate a datatbale with selected rows from another datatble

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables