Why wont Select Work

Why wont Select Work

support@kosmos.desupport@kosmos.de Posts: 16Questions: 7Answers: 0
edited May 2022 in DataTables 1.10

Hello,
I have initialized an Editor and a Table with select: single.
Can SOmebody tell me why its not working?

JS Editor

editorGeschaeftsfeld = new $.fn.dataTable.Editor( {
ajax: {
create:{
type:'POST',
url: '/editor/create',
data: function(d){
console.log(JSON.stringify(d))
}
},
edit:{
type:'PUT',
url: '/editor/edit',
data: function(d){
console.log(JSON.stringify(d))
}
},
remove:{
type:'DELETE',
url: '/editor/remove'
},
},

    table: "#geschaeftsfeldTabelle",
    fields: [{
            label: "Bezeichnung:",
            name: "name",
        },{
            label: "Betrag",
            name: "betrag"
        },{
            label: "Budget Typ",
            name: "budgetTyp"
        },{            
            label: "Kommentar",
            name: "kommentar"
        },{           
            label: "vq0",
            name: "vq0",
            type: "readonly"
        },{
            label: "vq1",
            name: "vq1",
            type: "readonly"
        },{
            label: "vq2",
            name: "vq2",
            type: "readonly"
        },{
            label: "vq3",
            name: "vq3",
            type: "readonly"
        },{
            label: "vq4",
            name: "vq4",
            type: "readonly"
        }
    ]
});

Js Table

    tabelleGeschaeftfeld = $('#geschaeftsfeldTabelle').DataTable({
        select: {
            style: 'single'
        },
        dom: "B",
        ajax:{
            url: "/api/v1/budgets/geschaeftsfelder",
            type: "GET",
            data: function(dx){         
            }
        },
        drawCallback: function() {
            console.log("DrawCallback");
          },
        columns: [
            { data: "name" },
            { data: "betrag", render: $.fn.dataTable.render.number( '.', ',', 0, '€' ) },
            { data: "budgetTyp" },
            { data: "kommentar" },
            { data: "vq0"},
            { data: "vq1"},
            { data: "vq2"},
            { data: "vq3"},
            { data: "vq4"},

        ], 
        columnDefs: [
            { targets: [0, 1, 2], visible: true},
            { targets: '_all', visible: false }
        ],
        buttons: [
            { text: "Neu" , extend: "create", editor: editorGeschaeftsfeld },
            { text: "Bearbeiten", extend: "edit",   editor: editorGeschaeftsfeld },
            { text: "Löschen",  extend: "remove", editor: editorGeschaeftsfeld },
            { text: "Laden", action: function ( e, dt, node, config ) {
                dt.ajax.reload();},
            },
            'colvis',
        ],

    })

HTML

    <div class="bg-light border-right vh-200" id="sidebar-wrapper">
            <table class="geschaeftsfeldTabelle " id="geschaeftsfeldTabelle"> 
                <thead>
                    <tr>
                        <th>Geschaeftsfeld</th>
                        <th>Betrag</th>
                        <th>Typ</th>
                        <th>Kommentar</th>
                        <th>Q0</th>
                        <th>Q1</th>
                        <th>Q2</th>
                        <th>Q3</th>
                        <th>Q4</th> 
                    </tr>
                </thead>
            </table>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    dom: "B",

    The dom option must have the t parameter in it, otherwise it won't display the table!

    That's the only issue that stands out to me. If that doesn't resolve it, can you link me to your page please.

    Thanks,
    Allan

  • support@kosmos.desupport@kosmos.de Posts: 16Questions: 7Answers: 0

    Perfect, Thank you!

Sign In or Register to comment.