How to disable click selected datatable jquery?

Question

I've use datatable jquery with child-row. Normal, I selected a main row, i use

$('#table tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                //do this
            }
            else {
               table.$('tr.selected').removeClass('selected');
               $(this).addClass('selected');
               //do this
            }
        });

When use this, i click any child-row, it effect together. Now, i want to don't click to child-row, how can i do it, using javascript or jquery ? Look at the picture sample.

I am not sure I fully understand the question.. But I think instead of full row, you only want one cell to be selected or deselected. So in your function above, replace all tr with td. Like this $('#table tbody').on('click', 'td', function () { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); //do this } else { table.$('td.selected').removeClass('selected'); $(this).addClass('selected'); //do this } }); — T.Shah
– T.Shah, Commented Aug 4, 2017 at 11:15
Don't click any child row, As you see the picture , i can click child row, Again , don't click any child row — Brian Crist
– Brian Crist, Commented Aug 5, 2017 at 1:13

Bindrid · Accepted Answer · 2017-08-06 03:08:05Z

I changed the behavior and fixed some things that can be traced by to DataTables example.

play with this one and see if it is closer to what you want. It assumes a single select. If you pick a row in the child, the parent becomes selected.

http://live.datatables.net/fowiduzi/3/edit

   $(document).ready(function () {

        var table = $('#example').DataTable({
            "data": testdata.data,
            select: "single",
            "columns": [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": '',
                    "render": function () {
                        // Use Font Awesome for the expander in the first cell
                        return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                    },
                    width: "15px"
                },
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "salary" }
            ],
            "order": [[1, 'asc']]
        });

        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            // get the Font Awesome container
            var tdi = tr.find("i.fa");
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tdi.first().removeClass('fa-minus-square');
                tdi.first().addClass('fa-plus-square');
            }
            else {
                // check to see if the child row exists.
                // dont want to overwrite it if its already there.
                if (row.child() && row.child().length > 0) {
                    row.child.show();
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                }
                tdi.first().removeClass('fa-plus-square');
                tdi.first().addClass('fa-minus-square');
            }
        });

        // Keeps the expander from being selected
        table.on("user-select", function (e, dt, type, cell, originalEvent) {
            if ($(cell.node()).hasClass("details-control")) {
                e.preventDefault();
            }
        });

        // If the parent row gets deselected by the user, deselect any
        // selected child rows
        table.on("deselect", function (e, dt, type, indexes) {
            if (type === 'row') {
                var child = dt.row(indexes[0]).child();
                if (child && child.length > 0) {
                    $(child[0]).find(".selected").removeClass("selected");
                }
            }
        });
        $("#example").on("click", ".dt-childtable tr", function () {
            var tr = $(this).closest("tr");
            var childTbl = tr.closest("table");
            var parentRow = childTbl.closest("tr").prev();

            // see if this row is already selected
            var isSelected = tr.hasClass("selected");
            // remove previous selects from child table
            childTbl.find(".selected").removeClass("selected");
            if (isSelected) {
                // this is a behavior question  do you want the parent row to deselect with 
                // when the child row  is.  
                //table.rows(parentRow).deselect();
            } else {
                tr.addClass("selected");
                // if the child is selected, make sure the parent is selected but
                // don't want to trigger a select event if the row 
                // is already  so check if selected 
                if (!$(table.row(parentRow).node()).hasClass("selected")) {
                    table.rows(parentRow).select();
                }
            }

        });
    });

Bindrid · Accepted Answer · 2017-08-05 02:39:26Z

This code prevents the rows from being selected/unselected from occurring on the details-control click.

It also uses font-awesome from instead of the icons shown in the datatables example.

 $(document).ready(function () {

     // Normal table definition
     var table = $('#example').DataTable({
         "data": testdata.data,
         select:"single",
         "columns": [
             {
                 "className": 'details-control',
                 "orderable": false,
                 "data": null,
                 "defaultContent": '',
                 "render": function () {

Instead of using the images provided from else where and adding it to my project I use the Font Awesome as the expander

                     return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                 },
                 width:"15px"
             },
             { "data": "name" },
             { "data": "position" },
             { "data": "office" },
             { "data": "salary" }
         ],
         "order": [[1, 'asc']]
     });

     // Add event listener for opening and closing details
     // Note the click event is only on the cell with the details-control class
     $('#example tbody').on('click', 'td.details-control', function () {
         var tr = $(this).closest('tr');
         var tdi = tr.find("i.fa");
         var row = table.row(tr);

         if (row.child.isShown()) {
             // This row is already open - close it
             row.child.hide();
             tr.removeClass('shown');
             // change the two font awesome icons
             tdi.first().removeClass('fa-minus-square');
             tdi.first().addClass('fa-plus-square');
         }
         else {
             // Open this row
             row.child(format(row.data())).show();
             tr.addClass('shown');
             tdi.first().removeClass('fa-plus-square');
             tdi.first().addClass('fa-minus-square')
         }
     });

     // This event handler prevents the details-control from changing the select row from occurring 
     table.on("user-select", function (e, dt, type, cell, originalEvent) {
         if ($(cell.node()).hasClass("details-control")) {
             e.preventDefault();
         }
     })
 });

Dear Bindrid, you have a good idea, but i checking and detect : when click detail-control (fa-square) and I still choose child-row when main-row not selected

Collectives™ on Stack Overflow

How to disable click selected datatable jquery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related