too silly to use dataTables

chamarejc · October 2019

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>

colin · October 2019

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

chamarejc · October 2019

Hi Colin,
Thanks for answer.
Here under :

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

<?php
    session_start();
    include $_SESSION['fonctionsPhp'];

<?php
>
?>


    <!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 {…}

arkfreestyle · October 2019

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
              ]
     }
    });

chamarejc · October 2019

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>

allan · October 2019

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

chamarejc · October 2019

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": ""
                    },
                });

kthorngren · October 2019

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

chamarejc · October 2019

Hi Kevin,
With your suggest I get the error :

kthorngren · October 2019

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

Kevin

chamarejc · October 2019

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
>
<?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);

<?php
>
?>


<!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>

too silly to use dataTables

too silly to use dataTables

Answers

Howdy, Stranger!

Categories

DataTables

too silly to use dataTables

too silly to use dataTables

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables