too silly to use dataTables

too silly to use dataTables

chamarejcchamarejc Posts: 6Questions: 1Answers: 0

I am trying to use dataTables without success and after lots of hours searching this forum and google I am here to get some help.

Here under my code. The first part is commented : It's what I use until now. The second part is my attempt with dataTable which give the error :
"DataTables warning: table id=listeRemise - Requested unknown parameter '0' for row 0, column 0".

Thanks if someone can help me.

<script src="<?php echo $_SESSION['versionJs']; ?>"></script>
<script src="<?php echo $_SESSION['fonctionsJs']; ?>"></script>
<script src="<?php echo $_SESSION['jqueryUi'] ?>"></script>
<script src="<?php echo $_SESSION['datePicker'] ?>"></script>
<script src="<?php echo $_SESSION['datatablesJs'] ?>"></script>

<script>

        function afficheListeRemise() {
//          console.log("remise");
//          $.post("../fonctions.php", {
//                  fonction: 'afficheDonnees',
//                  table: 'remise_liste',
//                  valeur: true
//              },
//              function(data) {
//                  console.log(data);
//              },
//          'json'
//          );
            $('#listeRemise').DataTable({
                "serverSide": true,
                'ajax':{
                    "type": "POST",
                    "url":  "../fonctions.php",
                    "data":function(d){
                        d.fonction = 'afficheDonnees';
                        d.table = 'remise_liste';
                        d.valeur = true;                        
                    },
                    "dataSrc": ""
                }
            });
        }


</script>

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @chamarejc ,

    Can you post the Ajax response and your HTML please. Or better still, please link to your page or create a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • chamarejcchamarejc Posts: 6Questions: 1Answers: 0

    Hi Colin,
    Thanks for answer.
    Here under :

    All the code,
    parameters sent,
    response from the server.

    <?php
        session_start();
        include $_SESSION['fonctionsPhp'];
    ?>
    
        <!DOCTYPE html>
        <html>
    
        <head>
            <title>Test dataTables</title>
            <meta content-type="text/html" ; charset="utf-8">
            <link rel="stylesheet" href="<?=$_SESSION['styleCss']?>" />
            <link rel="stylesheet" href="<?=$_SESSION['datatablesStyle']?>">
    
        </head>
    
        <body class="main">
    
            <div id="divListeRemise" style=" text-align:center">
    
                <table id="listeRemise" style="margin-left:auto ; margin-right:auto">
                    <colgroup>
                        <col style="width:10%">
                        <col style="width:10%">
                        <col style="width:20%">
                        <col style="width:10%">
                        <col style="width:10%">
                        <col style="width:10%">
                        <col style="width:10%">
                        <col style="width:10%">
                    </colgroup>
                    <thead>
                        <th>N° remise</th>
                        <th>Date balance</th>
                        <th>Affectation</th>
                        <th>libellé</th>
                        <th>Contrepartie</th>
                        <th>Journal</th>
                        <th>Montant</th>
                        <th>M. archivé</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
    
            </div>
    
            <script src="<?php echo $_SESSION['versionJs']; ?>"></script>
            <script src="<?php echo $_SESSION['fonctionsJs']; ?>"></script>
            <script src="<?php echo $_SESSION['datatablesJs'] ?>"></script>
    
            <script>
                afficheListeRemise();
    
                function afficheListeRemise() {
                    //          console.log("remise");
                    //          $.post("../fonctions.php", {
                    //                  fonction: 'afficheDonnees',
                    //                  table: 'remise_liste',
                    //                  valeur: true
                    //              },
                    //              function(data) {
                    //                  console.log(data);
                    //              },
                    //          'json'
                    //          );
                    $('#listeRemise').DataTable({
                        "serverSide": true,
                        'ajax': {
                            "type": "POST",
                            "url": "../fonctions.php",
                            "data": function(d) {
                                d.fonction = 'afficheDonnees';
                                d.table = 'remise_liste';
                                d.valeur = true;
                            },
                            "dataSrc": ""
                        }
                    });
                }
            </script>
    
        </body>
    
        </html> 
    

    Parameters sent :

    XHRPOSThttp://localhost/saf/fonctions.php
    [HTTP/1.1 200 OK 16ms]

    Données de formulaire
    draw 1
    columns[0][data] 0
    columns[0][name]
    columns[0][searchable] true
    columns[0][orderable] true
    columns[0][search][value]
    columns[0][search][regex] false
    columns[1][data] 1
    columns[1][name]
    columns[1][searchable] true
    columns[1][orderable] true
    columns[1][search][value]
    columns[1][search][regex] false
    columns[2][data] 2
    columns[2][name]
    columns[2][searchable] true
    columns[2][orderable] true
    columns[2][search][value]
    columns[2][search][regex] false
    columns[3][data] 3
    columns[3][name]
    columns[3][searchable] true
    columns[3][orderable] true
    columns[3][search][value]
    columns[3][search][regex] false
    columns[4][data] 4
    columns[4][name]
    columns[4][searchable] true
    columns[4][orderable] true
    columns[4][search][value]
    columns[4][search][regex] false
    columns[5][data] 5
    columns[5][name]
    columns[5][searchable] true
    columns[5][orderable] true
    columns[5][search][value]
    columns[5][search][regex] false
    columns[6][data] 6
    columns[6][name]
    columns[6][searchable] true
    columns[6][orderable] true
    columns[6][search][value]
    columns[6][search][regex] false
    columns[7][data] 7
    columns[7][name]
    columns[7][searchable] true
    columns[7][orderable] true
    columns[7][search][value]
    columns[7][search][regex] false
    order[0][column] 0
    order[0][dir] asc
    start 0
    length 10
    search[value]
    search[regex] false
    fonction afficheDonnees
    table remise_liste
    valeur true

    Answer

    XHRPOSThttp://localhost/saf/fonctions.php
    [HTTP/1.1 200 OK 16ms]

    JSON
    0 {…}
    numeroRemise 1
    dateRemise 2019-01-15
    affectation null
    journal Banque
    libelleContrepartie LCL
    contrepartie 512100
    montantRemise 0.00
    montantRemiseArchivee 101.45
    utilisateur Valérie
    ordre null
    dateModification 2019-01-15 11:06:25
    1 {…}
    numeroRemise 2
    dateRemise 2019-01-15
    affectation null
    journal Banque
    libelleContrepartie LCL
    contrepartie 512100
    montantRemise 0.00
    montantRemiseArchivee 848.20
    utilisateur Valérie
    ordre null
    dateModification 2019-01-15 11:16:37
    2 {…}
    3 {…}
    4 {…}
    5 {…}
    6 {…}
    7 {…}
    8 {…}
    9 {…}
    10 {…}
    11 {…}
    12 {…}
    13 {…}
    14 {…}
    15 {…}
    16 {…}
    17 {…}
    18 {…}
    19 {…}

    384 {…}
    385 {…}
    386 {…}

  • arkfreestylearkfreestyle Posts: 5Questions: 2Answers: 0

    Your error: "Requested unknown parameter '0' for row 0, column 0" happens when you're trying to access a column named '0' from your ajax url's json response, but most probably that column does not exist. Try the following:

    1) Set serverSide to false, that will let datatables handle creating columns/column names.

    2) If you need serverSide, then explicitly set the names of your columns as received in your json response.

    For example: if your ajax url json returns {"something": 100}
    Then you would tell your datatable about that column like this:

    $('#listeRemise').DataTable({
         "serverSide": true,
         'ajax':{
         "type": "POST",
         "url":  "../fonctions.php",
               }
         columns: [
                   {"data": "something"},
                   // add more of these objects with the names of your json keys
                  ]
         }
        });
    
  • chamarejcchamarejc Posts: 6Questions: 1Answers: 0

    Thanks to try to help me.

    I did what akfreestyle suggests. The table gives me the exact rows number but I always get the error "Requested unknown parameter '0' for row 0, column 0".

    Here under my code :

                    x = $('#listeRemise').DataTable({
                        "serverSide": false,
                        'ajax': {
                            "type": "POST",
                            "url": "../fonctions.php",
                            "data": function(d) {
                                d.fonction = 'afficheDonnees';
                                d.table = 'remise_liste';
                                d.valeur = true;
                            },
                            "columns":[
                                { "data":"numeroRemise"},
                                { "data":"dateRemise"},
                                { "data": "affectation" },
                                { "data": "journal"},
                                { "data": "libelleContrepartie" },
                                { "data": "contrepartie" },
                                { "data": "montantRemise" },
                                { "data": "montantRemiseArchivee" },                
                                { "data": "utilisateur" },              
                                { "data": "ordre" },                
                                { "data": "dateModification" }              
                            ],
                            "dataSrc": ""
                        },
                    });
                    console.log(x);
                }
            </script>
    
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,053 Site admin

    You've got your columns array inside the ajax object. It should be at the top level of the DataTables configuration object. See the example here.

    Allan

  • chamarejcchamarejc Posts: 6Questions: 1Answers: 0

    Thanks Allan,

    I changed my code to this but always the same result : number of raw exacts but nothing in raw.

                    $('#listeRemise').DataTable({
                        "serverSide": false,
                        'ajax': {
                            "columns":[
                                { "data": "numeroRemise" },
                                { "data": "dateRemise" },
                                { "data": "affectation" },
                                { "data": "journal" },
                                { "data": "libelleContrepartie" },
                                { "data": "contrepartie" },
                                { "data": "montantRemise" },
                                { "data": "montantRemiseArchivee" },                
                                { "data": "utilisateur" },              
                                { "data": "ordre" },                
                                { "data": "dateModification" }              
                            ],
                            "type": "POST",
                            "url": "../fonctions.php",
                            "data": function(d) {
                                d.fonction = 'afficheDonnees';
                                d.table = 'remise_liste';
                                d.valeur = true;
                            },
                            "dataSrc": ""
                        },
                    });
    
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Your code is effectively the same as before, its still inside the ajax option. It needs to look more like this:

    $('#listeRemise').DataTable({
        "serverSide": false,
        'ajax': {
            "type": "POST",
            "url": "../fonctions.php",
            "data": function(d) {
                d.fonction = 'afficheDonnees';
                d.table = 'remise_liste';
                d.valeur = true;
            },
            "dataSrc": ""
        },
    
            "columns":[
                { "data": "numeroRemise" },
                { "data": "dateRemise" },
                { "data": "affectation" },
                { "data": "journal" },
                { "data": "libelleContrepartie" },
                { "data": "contrepartie" },
                { "data": "montantRemise" },
                { "data": "montantRemiseArchivee" },               
                { "data": "utilisateur" },             
                { "data": "ordre" },               
                { "data": "dateModification" }             
            ],
    });
    

    Kevin

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Looks like you defined 11 columns using columns.data but in your second post you have 8 columns defined. They need to match.

    Kevin

  • chamarejcchamarejc Posts: 6Questions: 1Answers: 0

    After a lot of attempt, I succeeded to use datatable but without ajax. Hereunder the code I use (not this I sent in my first posts.
    Thanks for help.

    <?php
        session_start();
      if ($_SESSION['utilisateur'] == ""){
        header('location:accesInitClient.php');
     }
    ?>
    <?php
        include $_SESSION['fonctionsPhp'];
    
        $bdd = connexionBase();
        $titre =  $_POST['categorie'];
        $categorie = substr($titre,0,1);
    
        if ($categorie == 'X'){
            $tri = "STR_TO_DATE(dateX,'%d/%m/%Y') ASC";
        }
        else{
            $tri = 'codeAdherent DESC';
        }
    
        $req = $bdd->query("
            SELECT *
            FROM adherents
            WHERE categorie
            LIKE '%$categorie%'
            ORDER BY $tri
        ");
    
        $d = $req->fetchAll(PDO::FETCH_ASSOC);
    ?>
    
    <!doctype html>
    <html>
    
    <head>
        <title>Liste souscripteurs</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="<?=$_SESSION['styleCss']?>" />
        <link rel="stylesheet" href="<?=$_SESSION['datatablesStyle']?>">    
    </head>
    
    <header>
        <?php include $_SESSION['bandeau']; ?>
    </header>
    
    <body class="main" style="height:75%">
        <ul id="navmenu" class="menu">
            <li><a href='http://localhost/saf/pageAccueil.php'>Menu principal</a></li>
            <li><a href='listeSouscripteursHtml.php'>Retour</a></li>
        </ul>   
    
        <form id="saisieCode" action="../souscripteurs/accesBaseAdherents.php" target ="_blank" method="POST">
            <input type="text" id="codeAdherent" name="codeAdherent" value="" hidden/>  
        </form>
        
        <div  id='toPrint' style='width:50% ; margin-left:auto ; margin-right:auto'>
            <p style='font-family:arial ; font-size:1.5rem ; text-align:center'>Liste pour la catégorie "<?php echo $titre ?>"</p>
            <p style='font-size:1rem ; color:red ; text-align:center'>Click sur le code pour accéder au compte</p>
    
            <style type="text/css">
                td{
                    border-bottom:1px solid #dddddd
                }
            </style>
            
            <table id='myTable' style='border-bottom:1px solid #dddddd'>
                <thead>
                    <th>code</th>               
                    <th>catégorie</th>              
                    <th>nom</th>                
                    <th>prénom</th>
                    <th>date</th>
                    <th>N°</th>             
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        
        <script src="<?php echo $_SESSION['versionJs']; ?>"></script>
        <script src="<?php echo $_SESSION['fonctionsJs']; ?>"></script>
        <script src="<?php echo $_SESSION['datatablesJs'] ?>"></script>
    
        <script>
            $(document).ready(function() {
                
                var x = <?php echo json_encode($d)?>;
                var i = 0;
                var donneesTable ="";
                $.each(x, function(key, value){
                    if(x[i]['dateX'] == null){
                        x[i]['dateX'] = "";
                    }               
                    donneesTable += 
                        '<tr>' +
                            '<td>' + x[i]['codeAdherent'] + '</td>' +
                            '<td>' + x[i]['categorie'] + '</td>' +
                            '<td>' + x[i]['nom'] + '</td>' +
                            '<td>' + x[i]['prenom'] + '</td>' +
                            '<td>' + x[i]['dateX'] + '</td>' +
                            '<td>' + (i+1) +'</td>' +
                        '</tr>';
                    i++;
                });
    
                $('#myTable tbody').append(donneesTable);
                
                $('#myTable').dataTable({
                    language: {
                        info: "nb de lignes _TOTAL_"
                    },
                    paging: false,
                    fixedHeader: true,
                    scrollY:"40rem",
                    order: [5,"asc"],
                    dom: 'Bfrtip',              
                    buttons: [
                        'excel','print'
                    ],
                    columnDefs: [{
                        "orderable": false, "targets": 3
                    }],
                    oLanguage: {
                        "sSearch": "rechercher"
                    }
                });
            
                $('table tr td:first-child').click(function(){
                    var codeAdherent = $(this).text();
                    console.log(codeAdherent);
                    if($.isNumeric(codeAdherent)){              
                        $('#codeAdherent').val(codeAdherent);
                        $('#saisieCode').submit();
                    }
                });         
            });
        </script>
        </body>
    
    </html>
    
    
    
This discussion has been closed.