error on tableTool of jquery dataTable

xflamant

Hi,
I use the plugin DataTables and its editor of JQuery

here is the html part

       <table id="listMembres" class="display cell-border compact stripe" cellspacing="0" >
            <thead>
                <tr>
                    <th>Prenom</th>
                    <th>Nom</th>
                    <th>Adresse</th>
                    <th>Email</th>
                    <th>Telephone</th>
                    <th>Droits</th>
                    <th>Cotisation</th>
                </tr>
            </thead>
 
            <tfoot>
                <tr>
                    <th>Prenom</th>
                    <th>Nom</th>
                    <th>Adresse</th>
                    <th>Email</th>
                    <th>Telephone</th>
                    <th>Droits</th>
                    <th>Cotisation</th>
                </tr>
            </tfoot>
        </table>

Here is the jquery part part

$(function() {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function(e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });
        var villeArray= new Array();
 
        function villeLoader(){
        $.ajax({
          url: contextPath + "/unsecure/getVilles.htm",
          async: false,
          dataType: 'json',
          success: function (json) {
              for(var i=0;i<json.length;i++){
                obj= { "label" : json[i].label, "value" : json[i].value};
                test.push(obj);
              }
            }
        });
        return villeArray;
        }
        editor = new $.fn.dataTable.Editor( {
            ajax: {
                create: {
                    type: 'POST',
                    url:  contextPath + "/secure/createMembre.htm"
                },
                edit: {
                    type: 'PUT',
                    url:  contextPath + "/secure/updateMembre.htm"
                },
                remove: {
                    type: 'DELETE',
                    url:  contextPath + "/secure/deleteMembre.htm"
                }
            },
            table: "#listMembres",
            fields: [ {
                    label: "Prénom:",
                    name: "prenom"
                }, {
                    label: "Nom:",
                    name: "nom"
                }, {
                    label: "Adresse:",
                    name: "adresse"
                }, {
                    label: "Ville:",
                    name: "idVille",
                    type: "select",
                    options: villeLoader()
                }, {
                    label: "Pays:",
                    name: "idPays"
                }, {
                    label: "Email:",
                    name: "email"
                }, {
                    label: "Telephone:",
                    name: "telephone"
                }, {
                    label: "Login:",
                    name: "login"
                }, {
                    label: "Mot de passe:",
                    name: "password"
                }, {
                    label: "Droits:",
                    name: "droits"
                }, {
                    label: "Cotisation:",
                    name: "cotisation"
                }, {
                    label: "Question:",
                    name: "question"
                }, {
                    label: "Reponse:",
                    name: "reponse"
                }
            ]
        } );    
        $('#listMembres').dataTable({
            "processing" : true,
            "serverSide" : true,
            "autoWidth": true,
            "ajax" : {
                url : contextPath + "/secure/getMembres.htm",
                type : 'POST',
                dataType: 'json'
            },
            columns : [ {
                data : "prenom"
            }, {
                data : "nom"
            }, {
                data : "fullAdresse"
            }, {
                data : "email"
            }, {
                data : "telephone"
            }, {
                data : "droits"
            }, {
                data : "cotisation"
            }, {
                data : "id",
                visible : false
            }, {
                data : "login",
                visible : false
            }, {
                data : "password",
                visible : false
            }, {
                data : "idVille",
                visible : false
            }, {
                data : "adresse",
                visible : false
            }, {
                data : "idPays",
                visible : false
            }, {
                data : "question",
                visible : false
            }, {
                data : "reponse",
                visible : false
            } ],
            tableTools: {
                sRowSelect: "os",
                aButtons: [
                    { sExtends: "editor_create", editor: editor },
                    { sExtends: "editor_edit",   editor: editor },
                    { sExtends: "editor_remove", editor: editor }
                ]
            }
        });
 
    });

Everything is working well untill there. But when I want to make appear the threee buttons 'edit', 'crete' and 'delete', I add the following files

<link type="text/css" rel="stylesheet"
    href="<c:url value ='/resources/css/dataTables.tableTools.min.css'/>" />
 
    <script type="text/javascript"
    src="<c:url value='/resources/js/dataTables.tableTools.min.js'/>"></script>

I get the following error

TypeError: i[((h00 + D90) + b)] is undefined in the file "dataTables.editor.js"

I suppose I use wrongly the tableTools property of my DataTables. But I am a newbie and I don't see what to do. Thank you in advance for your answers

tangerine

TableTools does not provide "edit", "create", and "delete" buttons. From the TableTools docs:

TableTools adds a toolbar to a table to provide options for saving files (CSV, XLS, PDF), copying to system Clipboard, or printing the table.

EDIT: Please ignore this comment. I was completely wrong. My apologies.

allan

@xflamant - You code appears to look fine as far as I can see. One key point though is that TableTools must be loaded after DataTables, but before Editor. I'm not certain if this is the issue here or not, although I suspect it might be.

If it isn't can you link me to the page so I can debug it please?

Allan

xflamant

It was the issue Allan. Thank you both for your answers