How to add click event on header

vishesh

I have created a table using datatable and want to make a "Select All" column, on clicking on which, it must trigger scope function that will check all the enabled checkboxes.

This is the working code snippet that I have used

var dataTableOptions = {
        "pageLength" : 5,
        "order" : [ [ 1, "asc" ] ],
        "createdRow" : function(aRow, aData, aDataIndex) {
            aTransferObj.universalMap[aData.memberId + aData.lastName] = aData;
        },
        "dom" : '<"top"ip>rt<"bottom"><"clear">',
        "bPaginate" : false,// hide pagination
        "bFilter" : false, // hide Search bar
        "autoWidth" : false,
         "fnDrawCallback": function( oSettings ) {
        /* Code commented in order to stop Download button from getting disabled
         * $(".grpPlanChecked").prop('disabled', 'disabled');
         * $("#downloadCardButton").attr('disabled','disabled');*/
         $(".grpPlanChecked").prop('onclick', 'selectAll()');
         $("#searchError").hide().find('.msgTxt').remove();
         $("#searchAlert").hide().find('.msgTxt').remove(); },
        "columns" : [

                {
                    "className" : "dt-head-left",
                    "title" : "Select All",
                    "select": true,
                    "orderable" : false,
                    "id" : "selectAll",
                    "mRender" : function(data, type, full, meta) {
                        return "<input type='checkbox' id='grpPlanChecked' name='grpPlanChecked' "
                                + "class='grpPlanChecked' value='"
                                + full.bin
                                + "," + full.pcn +
                                // "disabled={{grpPlanChecked}} " +
                                "'/>";
                    }
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Plan ID",
                    "defaultContent" : "",
                    "data" : "plnId"
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Group",
                    "defaultContent" : "",
                    "data" : "group"
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Group Description",
                    "data" : "grpName",
                    "defaultContent" : "",
                    "orderable" : false
                },
                {
                    "className" : "dt-head-left",
                    "title" : "Print Qty",
                    "defaultContent" : "",
                    "orderable" : false,
                    "mRender" : function(data, type, full, meta) {
                        var _html = "";
                        _html += "<input type='text' id='eachCount'  class='eachCount' "
                                + "onkeypress='return isNumber(event)'"
                                + "ng-model='count' maxlength='3'"
                                + "class='form-control'  />";
                        return _html;
                    }
                } ]
    };

    aTransferObj.dataTable = $('#managePlanGroupDT')
            .DataTable(dataTableOptions);

    $("#managePlanGroupDT tbody").on('click checked unchecked',
            "input#grpPlanChecked",
            aTransferObj.scope.validateUniversalDwnldBtn);
    $("#managePlanGroupDT tbody").on('change keyup paste mouseup',
            "input#eachCount", function() {
                aTransferObj.scope.enablecheckBox();
                aTransferObj.scope.validateUniversalDwnldBtn();
            });
    $("#managePlanGroupDT thead").on('user-select','.dt-head-left',function( e, dt, type, cell, originalEvent ){
        aTransferObj.scope.selectAll});
//"tr.dt-head-left", aTransferObj.scope.selectAll);

Just the last section of code is where I am trying.
Below is the html generated with one row(tr) using this script for your reference to understand how script is working:

<table id="managePlanGroupDT" class="table table-striped table-hover table-condensed display compact dataTable no-footer" aria-describedby="managePlanGroupDT_info" role="grid" style="width: 100%;">
<thead>
<tr role="row">
<th class="dt-head-left sorting_disabled" rowspan="1" colspan="1" aria-label="Select All">Select All</th>
<th class="dt-head-left sorting_asc" tabindex="0" aria-controls="managePlanGroupDT" rowspan="1" colspan="1" aria-label="Plan ID: activate to sort column descending" aria-sort="ascending">
Plan ID</th>
<th class="dt-head-left sorting" tabindex="0" aria-controls="managePlanGroupDT" rowspan="1" colspan="1" aria-label="Group: activate to sort column ascending">
Group</th>
<th class="dt-head-left sorting_disabled" rowspan="1" colspan="1" aria-label="Group Description">
Group Description</th>
<th class="dt-head-left sorting_disabled" rowspan="1" colspan="1" aria-label="Print Qty">
Print Qty</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class=" dt-head-left">
<input type="checkbox" id="grpPlanChecked" name="grpPlanChecked" class="grpPlanChecked" value="bin4,pcn4" disabled="disabled"></td>
<td class="dt-head-left sorting_1">ABCDEF</td>
<td class=" dt-head-left">A</td>
<td class=" dt-head-left">A</td>
<td class=" dt-head-left"><input type="text" id="eachCount" class="eachCount" onkeypress="return isNumber(event)" ng-model="count" maxlength="3"></td>
</tr>
</tbody></table>

Preview like this(without css)

Select All	Plan ID	Group	Group Description	Print Qty
	ABCDEF	A	A

This is the function needed to be triggered on clicking on Select All

$scope.selectAll=function() {
        $('#managePlanGroupDT tr').each(function(row, tr) {
            if ($(tr).find('input[type="checkbox"]').prop("checked") == true) {
                $(tr).find('#grpPlanChecked').prop('checked', true);
            }
        });
    };

colin

Hi @vishesh ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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