Add row at the end of table

dgrammont

Hello

I create a table with a csv file read by my code and add all argument of file go in my table (like you see in the code) (for information my js and html is in the same file)
but when it try to add row with this for exemple (the function addLine) i have a error

DataTables warning: table id=data-planning - Requested unknown parameter 'ligne' for row 23, column 0. For more information about this error, please see http://datatables.net/tn/4

But when i un my fonction without the table create by my php , the function run corectly
So my question is why i have error and how to slove it

if you need more inforamation tell me

function addLine(){    
      var nbLigne = 1;
        while (document.getElementById(nbLigne) !== null) {
            nbLigne++;
        }        
    var t = $('#data-planning').DataTable();
    var counter = 1;
        t.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5',
            counter +'.6',
            counter +'.7',
 // to 23 , i cut the code here just for put the code here 
        ] ).draw( false );
        counter++;
    // Automatically add a first row of data
    $('#addRow').click();
}

<?php

//import.php

//les variables pour les id 

//nombre de ligne
$nbligne = 1;
//heure de debut du cariste
$time_Cariste_h_Deb="caristeHdeb";
//heure de fin du cariste
$time_Cariste_h_Fin="caristeHfin";
//nom du cariste
$nom_Cariste="nomCariste";
//nombre de palette du Cariste
$nb_pal_Cariste="nbPalCariste";

//heure de debut du chargeur
$time_Chargeur_h_Deb="chargeurHdeb";
//heure de fin du chargeur
$time_Chargeur_h_Fin="chargeurhfin";
//nom du chargeur
$nom_Chargeur="nomChargeur";
//nombre de palette du chargeur
$nb_pal_Chargeur="nbPalChargeur";
//id de nbligne
$nb_ligne = "nbLigne";
//la ligne expo mag est toujours egal a EXPE MAG 
$expMag = "EXPE MAG";

$uploaddir = '/home/grammont/Documents/VersionFinalCsv/'; // repertoir ou sera stocke finalement le fichier
$uploadfile = $uploaddir . basename($_FILES['csv_file']['name']);
$data = array();
if (move_uploaded_file($_FILES['csv_file']['tmp_name'], $uploadfile)) { // upload ok
    if (!empty($uploadfile)) {
        $file_data = fopen($uploadfile, 'r');
        fgetcsv($file_data, 0, ";");
        while ($row = fgetcsv($file_data, 0, ";")) {
           
           //ajoue de +1 a la fin de la chaine de caractere 
           $destock_deb = $time_Cariste_h_Deb.$nbligne;
           $destock_fin = $time_Cariste_h_Fin.$nbligne;
           $destock_nom_Cariste = $nom_Cariste.$nbligne;
           $destock_nb_pal = $nb_pal_Cariste.$nbligne;
           
           $charg_deb = $time_Chargeur_h_Deb.$nbligne;
           $charg_fin = $time_Chargeur_h_Fin.$nbligne;
           $charg_nomChargeur = $nom_Chargeur.$nbligne;
           $charg_nb_pal = $nb_pal_Chargeur.$nbligne;
           
           $nb_id_ligne = $nb_ligne.$nbligne;
           //evite les ligne vide
            if ($row[2] !== "") {
                array_push($data, array(               
                    'ligne' => "<span id='$nbligne'>$nbligne</span>",
                    'expo_Mag' => $expMag,
                    'report' => "<input type='text' id='$nb_id_ligne' style='width: 40px; height: 10px'/>" ,
                    'dpt' => utf8_encode($row[3]),
                    'hrev' => utf8_encode($row[5]),
                    'transporteur' => utf8_encode($row[7]),
                    'edi' => utf8_encode($row[8]),
                    'destinataires' => utf8_encode($row[11]),
                    'heure_Liv' => utf8_encode($row[13]),
                    'nb_Supp' => "<input type='number' id='$destock_nb_pal' style='width: 80px; height: 10px' value='$row[14]' onchange='diffTimeCarist()'/>",
                    'quai' => "<input type='text'/>",
                    'cariste' => "<input type='text' id='$destock_nom_Cariste'/>",
                    'destock_HD' => "<input type='time' id='$destock_deb' onchange='diffTimeCarist()'/>",
                    'destock_HF' => "<input type='time' id='$destock_fin' onchange='diffTimeCarist()'/>",
                    'h_Arriv' => "<input type='time'/>",
                    'porte' => "<input type='text'/>",
                    'chargeur' => "<input type='text' id='$charg_nomChargeur'/>",
                    'charg_H_Deb' => "<input type='time' id='$charg_deb' onchange='diffTimeCharg()'/>",
                    'charg_H_Fin' => "<input type='time' id='$charg_fin' onchange='diffTimeCharg()'/>",
                    'nb_Supp_Charg' => "<input type='number' id='$charg_nb_pal' style='width: 100px' onchange='diffTimeCharg()'/>",
                    'nb_Raq' => "<input type='number' style='width: 100px'/>",
                    'nb_pal_leg' => "<input type='number' style='width: 100px'/>",
                    'site' => "<input type='text'/>",
                ));
                $nbligne = $nbligne + 1;
                
            }
        }
    }
} else { // pb upload
    $data[] = array(
        'ligne' => "pb upload",
        'expo_Mag' => "pb upload",
        'report' => "pb upload",
        'dpt' => "pb upload",
        'hrev' => "pb upload",
        'transporteur' => "pb upload",
        'edi' => "pb upload",
        'destinataires' => "pb upload",
        'heure_Liv' => "pb upload",
        'nb_Supp' => "pb upload",
        'quai' => "pb upload",
        'cariste' => "pb upload",
        'destock_HD' => "pb upload",
        'destock_HF' => "pb upload",
        'h_Arriv' => "pb upload",
        'porte' => "pb upload",
        'chargeur' => "pb upload",
        'charg_H_Deb' => "pb upload",
        'charg_H_Fin' => "pb upload",
        'nb_Supp_Charg' => "pb upload",
        'nb_Raq' => "pb upload",
        'nb_pal_leg' => "pb upload",
        'site' => "pb upload"
    );
}
// envoyer le contenu au format json
header('Content-Type: application/json;charset=utf-8');
echo json_encode($data);

dgrammont

<script>

    $(document).ready(function () {
        $('#upload_csv').on('submit', function (event) {
            event.preventDefault();
            $.ajax({
                url: "import.php",
                method: "POST",
                data: new FormData(this),
                dataType: 'json',
                contentType: false,
                cache: false,
                processData: false,
                success: function (jsonData)
                {
                    $('#csv_file').val('');
                    $('#data-planning').DataTable({
                        data: jsonData,
                        columns: [
                            {data: "ligne"},
                            {data: "expo_Mag"},
                            {data: "report"},
                            {data: "dpt"},
                            {data: "edi"},
                            {data: "hrev"},
                            {data: "transporteur"},
                            {data: "heure_Liv"},
                            {data: "destinataires"},
                            {data: "nb_Supp"},
                            {data: "quai"},
                            {data: "cariste"},
                            {data: "destock_HD"},
                            {data: "destock_HF"},
                            {data: "h_Arriv"},
                            {data: "porte"},
                            {data: "chargeur"},
                            {data: "charg_H_Deb"},
                            {data: "charg_H_Fin"},
                            {data: "nb_Supp_Charg"},
                            {data: "nb_Raq"},
                            {data: "nb_pal_leg"},
                            {data: "site"}
                        ]
                    });
                }
            });
        });
    });

</script>

<html>
    <head>
        <title>Import CSV File into Jquery Datatables using PHP Ajax</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <style>
            .box
            {
                max-width:800px;
                width:100%;
                margin: 0 auto;;
            }

        </style>
    </head>
    <body>
        <div class="container-md" style="margin-left: 24px;margin-right: 24px;">
            <br />
            <h3 align="center">Import CSV File into Jquery Datatables using PHP Ajax</h3>
            <br />
            <form id="upload_csv" method="post" enctype="multipart/form-data">
                <div class="col-md-3">
                    <br />
                </div>  
                <div class="col-md-4">  
                    <input type="file" name="csv_file" id="csv_file" accept=".csv" style="margin-top:15px;" />
                </div>  
                <div class="col-md-5">  
                    <input type="submit" name="upload" id="upload" value="Upload" style="margin-top:10px;" class="btn btn-info" />
                </div>  
                <div style="clear:both"></div>
            </form>
            <br />
            <br />
            <div class="table-responsive">
                <table class="table table-striped table-bordered" id="data-planning">
                    <caption>Planning final</caption>
                    <thead>

                        <tr>
                            <th id="test">Ligne</th>
                            <th>Expe-Mag-Transfert-reverse</th>  
                            <th>report</th>
                            <th>DPT</th>
                            <th>N°EDI</th>
                            <th>H_REV</th>
                            <th>Trasporteur</th>
                            <th>H_Liv</th>
                            <th>Destinataire</th>
                            <th>nb_supp</th>
                            <th>Quai</th>
                            <th>Cariste</th>
                            <th>Destock_H_Deb</th>
                            <th>Destock_H_Fin</th>
                            <th>H_Arriv</th>
                            <th>Porte</th>
                            <th>chargeur</th>
                            <th>Charg_h_Deb</th>
                            <th>Charg_h_Fin</th>
                            <th>Nb_supp_Chargées</th>
                            <th>Nb_RAQ</th>
                            <th>Nb_Pal_legères</th>
                            <th>site</th>
                        </tr>

                    </thead>
                </table>
                <input type="button" value="ajouté ligne" id="button" onclick="addLine()">
            </div>               
        </div>
    </body>
</html>

kthorngren

but when it try to add row with this for example (the function addLine) i have a error
So my question is why i have error and how to slove it

Did you follow the troubleshooting steps at the link provided in the error?

You are adding an array of columns but you defined columns.data so Datatables is expecting an object structured like your original data.

Add row at the end of table

The row will be displayed in the table based on the current order of the table. It won't necessarily be placed at the end. Maybe you can put it in the footer instead.

Kevin

dgrammont

So i should deifne every colums like this for exemple ?

$('#data-planning').DataTable({
                        "columnDefs": [{
                                "targets": [0],
                                "data": null
                            }]
                    });

kthorngren

No. You still need to use columns.data for object structured data. You need to use an object, not array, with rows.add(). For example:

        t.row.add( {
            ligne: counter +'.1',
            expo_Mag: counter +'.2',
            report: counter +'.3',

 // to 23 , i cut the code here just for put the code here
        } ).draw( false );

Kevin

dgrammont

Thank you Kevin.