On Checkbox check always getting the first row value in the alert using angular JS

Question

I have a datatable with many records in it. And each row consists of checkbox. What happening here is, at any row I check for alert I am always getting the data of the first row of the datatable.

Below is my code.

var app = angular.module('MyApp', ['datatables']);
app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
        $scope.dtColumns = [
            DTColumnBuilder.newColumn(null, '').renderWith(function (data, type, full) {
                return '<input type="checkbox" class="check" data-object-id="' + full.objectid + '">'
            }),
            DTColumnBuilder.newColumn("OBJECTID", "ID"),
            DTColumnBuilder.newColumn("SERVICE_CODE", "Service Code"),
            DTColumnBuilder.newColumn("COND1", "Condition 1"),
            DTColumnBuilder.newColumn("COND2", "Condition 2"),
            DTColumnBuilder.newColumn("COND3", "Condition 3"),
            DTColumnBuilder.newColumn("SERVICE_TYPE", "Service type"),
            DTColumnBuilder.newColumn("REMARK", "Remark"),
            DTColumnBuilder.newColumn("DESCRIPTION", "Description")
        ]
        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            url: "/home/getdata",
            type: "POST"
        })
        .withPaginationType('full_numbers')
        .withDisplayLength(10);

        $scope.dtInstance = {};
        $scope.dtInstanceCallback = function (instance) {
            $scope.dtInstance = instance;
        }
        $scope.dtRebind = function () {
            $scope.dtInstance.DataTable.draw()
        }

        $('#entry-grid').on('click', '.check', function () {
            var row = $(this).closest("tr");
            var data = $scope.dtInstance.DataTable.row().data();
            var strStringifyData = JSON.stringify(data);

            alert(strStringifyData);  //here its coming

        })
    }])

Please suggest how to implement it

On your click handler you are getting var row but it is not used anymore. You need to get value from this particular row, ` var data = $scope.dtInstance.DataTable.row(row).data();` — dganenco
– dganenco, Commented Jan 16, 2019 at 10:04
Try to get correct row using row() method datatables.net/reference/api/row() — dganenco
– dganenco, Commented Jan 16, 2019 at 10:05
@dganenco: I am using it, have a look here var data = $scope.dtInstance.DataTable.row().data(); — HEEN
– HEEN, Commented Jan 16, 2019 at 10:06
ok, any idea on how to do single selection at a time. I am now able to select multiple rows — HEEN
– HEEN, Commented Jan 16, 2019 at 10:09
Try to get selected row using '.selected' selector. I'm trying to prepare fiddle for you. $scope.dtInstance.DataTable.row('.selected').data() — dganenco
– dganenco, Commented Jan 16, 2019 at 10:19

dganenco · Accepted Answer · 2019-01-16 10:55:00Z

1

Finally I got it. You can use node as selector for row. So in your particulr case

var selectedRow;
$('#entry-grid').on('click', '.check', function () {
                                if(selectedRow){
                    $(selectedRow).find('.check').prop('checked', false);                
                }

                            selectedRow = $(this).closest("tr")[0]
                var data = $scope.dtInstance.DataTable.row(selectedRow).data();
                var strStringifyData = JSON.stringify(data);

                alert(strStringifyData);  //here its coming

            })

edited Jan 16, 2019 at 10:55

answered Jan 16, 2019 at 10:30

dganenco

1,6161 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

HEEN Over a year ago

i am still able to select multiple rows at a time. can we make it single ??

dganenco Over a year ago

Is it possible to using 'sRowSelect' : 'single' feature. You need to add it on your initialization phase datatables.net/extensions/tabletools/initialisation By default when row selection is active, TableTools will select a row when any element in the table is clicked. It can be useful to limit this selection to certain columns, or even certain elements in the row, which can be done through this option. It is a simple jQuery selector string that is used to select the elements that will perform the select..

dganenco Over a year ago

I updated my answer. Internal implementation will not satisfy your requirements I guess.

HEEN Over a year ago

yes, its working now. can I ask u one more thing if you don't mind ?

davidkonrad Over a year ago

@BN, do not over complicate, it is redundant to the insane to include a "selectedRow". You already had it in the answer yesterday, you just simply forget to include row in $scope.dtInstance.DataTable.row(row).data() ...Obvious you can do as you wish, but I foresee a lot of problems if you are polluting your code with redundant nothing burgers ...

|

Collectives™ on Stack Overflow

On Checkbox check always getting the first row value in the alert using angular JS

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related