know where line my button is

dgrammont · October 2020

Hello
I want to send all the data (to my js) present on the same line as my button "envoyer" is.
All data in the line hase a id , and i want to send the data of line colum by colum.
Because i use the data to my DB.
If i know just the number of line where my button is , it would already be excellent .
Because in know the name of my id and i just need to add the number of line at the end of the id.

i have try this

var table = $('#example').DataTable();
var row = table.row('#row-10');
document.getElementById("id").innerHTML=row;
// i create a div with id = id in my htm just for test

but i think i don't know how to use the selector

img of the result when i upload a csv file :


    <!DOCTYPE html>
    <html>
        <head>
            <title>Planning</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>

            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css">
            <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
            <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script>
            <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
            <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
            <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
            <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
            <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
            <script src="js/scriptCalcule.js" type="text/javascript"></script>

            <style>
                .box
                {
                    max-width:800px;
                    width:100%;
                    margin: 0 auto;;
                }

            </style>

        <body>
            <div class="container-md" style="margin-left: 24px;margin-right: 24px;">
                <br />
                <h3 align="center">Planning du <span id="date"></span></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">
                        <input type="button" value="ajouté ligne" id="ajoute_ligne" onclick="addLine()" style="display: none">
                        <input type="button" value="delte Talbe"  id="del_Talbe" onclick="deleteTable()" style="display: none">
                        <input type="button" value="know row" onclick="whererow()">
                        <input type="text" id="row"/>
                        <thead>
                            <tr>
                                <th>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>
                                <th>enoyer</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </body>
    </head>
    </html>

dgrammont · October 2020

<?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;
           
                   
           $expMag_id = "exp_Mag".$nbligne;
           $report_id = "report".$nbligne;
           $dpt_id = "dpt".$nbligne;
           $hrev_id = "hRev".$nbligne;
           $transporteur_id = "transporteur".$nbligne;
           $edi_id = "edi".$nbligne;
           $destinataire_id = "destinataire".$nbligne;
           $heurLiv_id = "hLiv".$nbligne;
           $quai_id = "quai".$nbligne;
           $hariv_id = "hArriv".$nbligne;
           $port_id = "porte".$nbligne;
           $nbraq_id = "nbRaq".$nbligne;
           $nbpalleg_id = "nbPalLeg".$nbligne;
           $site_id = "site".$nbligne;
           $envoyer_id = "envoyer".$nbligne;
            //evite les ligne vide
            if ($row[2] !== "") {
                array_push($data, array(               
                    'ligne' => "<span id='$nbligne'>$nbligne</span>",
                    'expo_Mag' => "<span id='$expMag_id'>$expMag</span>",
                    'report' => "<input type='text' id='$report_id' style='width: 40px; height: 10px'/>" ,
                    'dpt' => "<span id='$dpt_id'>".utf8_encode($row[3])."</span>",
                    'hrev' => "<span id='$hrev_id'>".utf8_encode($row[5])."</span>",
                    'transporteur' => "<span id='$transporteur_id'>".utf8_encode($row[7])."</span>",
                    'edi' => "<span id='$edi_id'>".utf8_encode($row[8])."</span>",
                    'destinataires' => "<span id='$destinataire_id'>".utf8_encode($row[11])."</span>",
                    'heure_Liv' => "<span id='$heurLiv_id'>".utf8_encode($row[13])."</span>",
                    'nb_Supp' => "<input type='number' id='$destock_nb_pal' style='width: 80px; height: 10px' value='$row[14]' onchange='diffTimeCarist()'/>",
                    'quai' => "<input type='text' id='$quai_id'/>",
                    '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' id='$hariv_id'/>",
                    'porte' => "<input type='text' id='$port_id'/>",
                    '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: 80px' onchange='diffTimeCharg()'/>",
                    'nb_Raq' => "<input type='number' id='$nbraq_id' style='width: 80px'/>",
                    'nb_pal_leg' => "<input type='number' id='$nbpalleg_id' style='width: 80px'/>",
                    'site' => "<input type='text' id='$site_id'/>",
                    'envoyer' => "<input type='submit' id='$envoyer_id'/>"
                ));
                $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);

kthorngren · October 2020

I'm not sure I understand the question. Sounds like you have a column with buttons in each row and you want the row data of the clicked button. Take a look ath this example for the recommended way to use events with Datatables. This example shows one way to get the row data using that technique:
http://live.datatables.net/xijecupo/1/edit

Is this what you are looking for?

Kevin

dgrammont · October 2020

Yes this is what i want but just a when i click on button ,the button return the line number . And i can't put the code in $(document).redy.

kthorngren · October 2020

And i can't put the code in $(document).redy.

You can create the event in initComplete.

Kevin

dgrammont · October 2020

so is somthing like this ?

$('#data-planning').dataTable( {
  "initComplete": function(settings, json) {
    var table = $('#data-planning').DataTable();
    $('#dataplaning tbody').on('click', '.position', function () {
    var row = $(this).closest('tr'); 
    var data = table.row( row ).data().position;
    console.log(data);
});  
} 
});

kthorngren · October 2020

Instead of var table = $('#data-planning').DataTable(); use var api = this.api() and replace table with api on line 6. But yes something like that should work.

Kevin

dgrammont · October 2020

when put the code in the function i have a error
**DataTables warning: table id=data-planning - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3**

 function test(){
$('#data-planning').dataTable( {
  "initComplete": function(settings, json) {
   var api = this.api();
    $('#dataplaning tbody').on('click', '.position', function () {
    var row = $(this).closest('tr'); 
    var data = api.row( row ).data().position;
    console.log(data);
});  
} 
});
}

if i don't put the code in function they do nothing.

 $('#data-planning').dataTable( {
  "initComplete": function(settings, json) {
   var api = this.api();
    $('#dataplaning tbody').on('click', '.position', function () {
    var row = $(this).closest('tr'); 
    var data = api.row( row ).data().position;
    console.log(data);
});  
} 
});

i don't know if you need the js

$(document).ready(function () {
    $('#upload_csv').on('submit', function (event) {

        event.preventDefault();
        $.ajax({
            url: "./php/import.php",
            method: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function (jsonData)
            {
                $('#csv_file').val('');

                $('#data-planning').DataTable({
                    data: jsonData,
                    dataType: 'json',
//                    dom: 'Bfrtip',
//                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                    fixedHeader: false,
                    "lengthMenu": [[10, 15, 25, 50, 100, -1], [10, 15, 25, 50, 100, "Tous"]],
                    'iDisplayLength': 25,
                    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"},
                        {data: "envoyer"}
                    ]
                });
            }
        });
        document.getElementById("ajoute_ligne").style.display = "block";
        document.getElementById("del_Talbe").style.display = "block";
        document.getElementById("visuel").style.display = "block";
    });

});

kthorngren · October 2020

If you read the information at the link provide in the error it will explain that you are trying to initialize Datatables twice and provide options to fix. You will want the Single initialization fix. Basically place the initComplete in with the rest of the options you have in the success function of your last code snippet.

Kevin

dgrammont · October 2020

i put in end of the success but nothing appen

$(document).ready(function () {
    $('#upload_csv').on('submit', function (event) {

        event.preventDefault();
        $.ajax({
            url: "./php/import.php",
            method: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function (jsonData)
            {
                $('#csv_file').val('');

                $('#data-planning').DataTable({
                    data: jsonData,
                    dataType: 'json',
//                    dom: 'Bfrtip',
//                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                    fixedHeader: false,
                    "lengthMenu": [[10, 15, 25, 50, 100, -1], [10, 15, 25, 50, 100, "Tous"]],
                    'iDisplayLength': 25,
                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"},
                        {data: "envoyer"}
                    ],
                    
                    "initComplete": function (settings, json) {
                        var api = this.api();
                        $('#dataplaning tbody').on('click', '.tr', function () {
                            var row = $(this).closest('tr');
                            var data = api.row(row).data().position;
                            
                             alert( 'You clicked on '+row[0]+'\'s row' );
                            console.log(data);
                        });
                    }
                });


            }
        });
        document.getElementById("ajoute_ligne").style.display = "block";
        document.getElementById("del_Talbe").style.display = "block";
        document.getElementById("visuel").style.display = "block";
    });

});

kthorngren · October 2020

You have $('#dataplaning tbody').on('click', '.tr', function () {. Change the '.tr' to '.tr'. The . is a selector for a class. However I don't think this is what you want if you are creating an event for a button click. You will want a selector that targets the button something like the example I provided earlier.

Kevin

dgrammont · November 2020

I found a solution

$(document).ready(function () {
 $(document).on("click", "input[id^=envoyer]", bouttonEnvoyer);
//...
}
function bouttonEnvoyer() {
    var id = $(this).attr('id');
    var numero = id.substring(7);
    console.log("id :" + id);
    console.log("numero:" + numero);

You very help me for my probleme Kevin thanks you.

know where line my button is

know where line my button is

Answers

Howdy, Stranger!

Categories

DataTables

know where line my button is

know where line my button is

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables