'multi' checkbox not working what am I missing

orionaselite

Am trying to enable multiple checkox selection. Any ideas what I am doing wrong?

Included

<link rel="stylesheet" type="text/css" href="DataTables/Select-1.2.0/css/select.bootstrap.min.css"/>
<script type="text/javascript" src="DataTables/Select-1.2.0/js/dataTables.select.min.js"></script>

    var table = $('#users').DataTable( {
        "order": [],
        "columnDefs": [ {
      "targets": [ 0,1,4,8 ],
      "orderable": false
    } ],
        "language":
        {
    "sDecimal":           ",",
    "sEmptyTable":        "Δεν υπάρχουν δεδομένα στον πίνακα",
    "sInfo":              "Εμφανίζονται _START_ έως _END_ από _TOTAL_ εγγραφές",
    "sInfoEmpty":         "Εμφανίζονται 0 έως 0 από 0 εγγραφές",
    "sInfoFiltered":      "(φιλτραρισμένες από _MAX_ συνολικά εγγραφές)",
    "sInfoPostFix":       "",
    "sInfoThousands":     ".",
    "sLengthMenu":        "Δείξε _MENU_ εγγραφές",
    "sLoadingRecords":    "Φόρτωση...",
    "sProcessing":        "Επεξεργασία...",
    "sSearch":            "Αναζήτηση:",
    "sSearchPlaceholder": "Αναζήτηση",
    "sThousands":         ".",
    "sUrl":               "",
    "sZeroRecords":       "Δεν βρέθηκαν εγγραφές που να ταιριάζουν",
    "oPaginate": {
        "sFirst":    "Πρώτη",
        "sPrevious": "Προηγούμενη",
        "sNext":     "Επόμενη",
        "sLast":     "Τελευταία"
    },
    "oAria": {
        "sSortAscending":  ": ενεργοποιήστε για αύξουσα ταξινόμηση της στήλης",
        "sSortDescending": ": ενεργοποιήστε για φθίνουσα ταξινόμηση της στήλης"
    }
},
        "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        ajax: 'php/table.users.php',
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox'
            },
            {
                "data": "profile_pic",
                render: function ( data, type, row ) {
                var path ='http://www.eadvertise.eu/ael-futsal-new/upload/profile_pics/'+data;  
                //return '<img class="img-circle" src="'+path" width="100"/>';
                return '<img width="100" class="img-circle" src="'+path+'"/>';
                }
            },
            {
                "data": "full_name"
            },
            {
                "data": "email"
            },
            {
                "data": "password",
                render: function ( data, type, row ) {return '****';}
            },
            {
                "data": "dob"
            },
            {
                "data": "phone_number"
            },
            {
                "data": "status",
                render: function(data,type,row){
                if (data==0){return '<label for=\"status\" id="lblstatus" class="label label-warning">Ανενεργός</label>';}
                if (data==1){return '<label for=\"status\" id="lblstatus" class="label label-success">Ενεργός</label>';}
                if (data==2){return '<label for=\"status\" id="lblstatus" class="label" style="background-color:red;">Διαγραμμένος</label>';}
                }
            },
            {
                data: null,
                render: function ( data, type, row ) {
                if(data.status=="1"){return '<div class=\"btn-group\"><a id=\"edit-button\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default editor_edit\"><i class=\"fa fa-pencil\"></i></a><a id=\"delete-button\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger editor_remove\"><i class=\"fa fa-times\"></i></a><a id=\"change-status-button\" data-toggle=\"tooltip\" title=\"Απενεργοποίηση\" class=\"btn btn-xs btn-stop editor_changetozero\"><i class=\"fa fa-stop\"></i></a></div>';}
                if(data.status=="0"){return '<div class=\"btn-group\"><a id=\"edit-button\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default editor_edit\"><i class=\"fa fa-pencil\"></i></a><a id=\"delete-button\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger editor_remove\"><i class=\"fa fa-times\"></i></a><a id=\"change-status-button\" data-toggle=\"tooltip\" title=\"Ενεργοποίηση\" class=\"btn btn-xs btn-stop editor_changetoone\"><i class=\"fa fa-play\"></i></a></div>';}
        
    },
                //defaultContent: '<div class=\"btn-group\"><a id=\"edit-button\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default editor_edit\"><i class=\"fa fa-pencil\"></i></a><a id=\"delete-button\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger editor_remove\"><i class=\"fa fa-times\"></i></a><a id=\"change-status-button\" data-toggle=\"tooltip\" title=\"Delete\" class=\"btn btn-xs btn-stop editor_change\"><i class=\"fa fa-stop\"></i></a></div>',
                //defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>',
                className: 'center'
            }
            
            
        ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        select: true,
        //lengthChange: false
    } ); 
    

allan

Can you link to the page so I can debug what is currently happening please?

Allan

allan

Thanks for the PM with the login details.

This is the issue:

        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        select: true,

You can't have select as two different values. That's like trying to have var i=0; i=1; and expecting i to be both 0 and 1!

Just drop the select: true and it should work as expected.

Allan

orionaselite

Ok done but now I another question

I have a custom delete button

// Delete a record
    $('#users').on( 'click', 'a.editor_remove', function (e) {
        e.preventDefault();
 
        editor
            .edit( table.row( { selected: true } ).index(), false )
                       .set( 'status', 2 )
                       //.val( 'status', 2 )
                        .submit();
    } );

i need all selected itams ideas?

allan

table.row( { selected: true } ) is the correct way to get the selected rows.

If that isn't working for you can you give me a link to the page so I can debug it please.

Allan

orionaselite

I don't have a place to setup my test project so you can see it unfortunately. It is deleting but only one row. If I select row number 1,3,5 only one is set to status = 2 after pressing the delete button.

I think maybe I was unclear and pasted the wrong code for my issue before. My code is as follows. Somewhere I have:

new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor},
        { extend: "edit",   editor: editor},
        /*{ extend: "remove", editor: editor}*/
        {
                extend: "remove",
                editor: editor,
                text: "Διαγραφή",
                action: function ( e, dt, node, config ) {
                editor
                        .edit( table.row( { selected: true } ).index(), false )
                        .set( 'status', 2 )
                        .submit();
                }
            }
    ] );

so the deletion is not done per row. but by clicking a custom button above the whole table. That is why I think

                        .edit( table.row( { selected: true } ).index(), false )

doesn't do what I intend. I need to be able to select multiple rows e.g. 1,3,5 and set each rows status to 2

allan

If I select row number 1,3,5 only one is set to status = 2 after pressing the delete button

What are the parameters that are being sent to the server? You can see that in the "Headers" tab of your browser's Network inspector tools.

Allan

orionaselite

Got this from the Params tab in Firefox. I modified names and stuff but it is the data of the only record that is being deleted (status being set to 2).

action=edit
data[row_33][profile_pic]=0.jpg
data[row_33][full_name]=George
data[row_33][email]=test@test.com
data[row_33][password]=somepass in md5
data[row_33][dob]=01-01-1970
data[row_33][phone_number]=35799000000
data[row_33][status]=2

allan

Thanks. That shows that it is sending only one row, which prompted me to look at the code again:

.edit( table.row( { selected: true } ).index()

Its is using row() - i.e. singular (my suggestion above is at fault - sorry). Use rows() for multiples rows (table.rows( { selected: true } ).indexes() in this case.

Allan

orionaselite

I get

TypeError: table.rows(...).index is not a function

what I tried was

.edit( table.rows( { selected: true } ).index(), false )

and

.edit( table.rows( { selected: true } ).index())

allan

TypeError: table.rows(...).index is not a function

Suggests that table isn't a DataTables API instance. It should be!

I would need a test case showing the issue to be able to understand what is going wrong there.

Allan

allan

Sorry - as soon as I posted that I realised what was wrong. Its plural:

table.rows( ... ).indexes()

is what should be used: rows().indexes().

Allan

orionaselite

Thank you that did it. Sorry for the hassle. I am trying to learn it with a specific scenario in mind. The scenario had some complexity so that I can put myself and the component through it's paces. Thanks a million