Add a checkbox in each row for datatable jQuery using Angular.js

Question

I want to display some data in a datatable format by using Angular.js.

So I did something like below.

Angular

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.js"></script>

var app = angular.module('myapp', ['datatables']);
app.controller('homectrl', ['$scope', '$http', 'dtoptionsbuilder', 'dtcolumnbuilder',
    function ($scope, $http, dtoptionsbuilder, dtcolumnbuilder) {
        $scope.dtcolumns = [
            //dtcolumnbuilder.newcolumn("action", "action"),
            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);
    }])

<div ng-app="MyApp" class="container" ng-controller="homeCtrl">

    <div ng-controller="homeCtrl">
        <table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover">           
        </table>
<br />
    </div>

And Controller

public ActionResult getdata()
    {
        DataTable dt = new DataTable();
        using (OracleConnection conn = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnAPP_NEIQC"].ToString()))
        {   
            GetData objGetData = new GetData();
            dt =  objGetData.GetDataForGrid();

            var circleList = (from DataRow dr in dt.Rows
                           select new 
                           {         
                               //Action = "",
                               OBJECTID = Convert.ToString(dr["OBJECTID"]),
                               SERVICE_CODE = Convert.ToString(dr["SERVICE_CODE"]),
                               COND1 = Convert.ToString(dr["COND1"]),
                               COND2 = Convert.ToString(dr["COND2"]),
                               COND3 = Convert.ToString(dr["COND3"]),
                               SERVICE_TYPE = Convert.ToString(dr["SERVICE_TYPE"]),
                               REMARK = Convert.ToString(dr["REMARK"]),
                               DESCRIPTION = Convert.ToString(dr["DESCRIPTION"]),
                           }).ToList();

            return Json(circleList, JsonRequestBehavior.AllowGet);
        }
    }

Now what I want is, I want to add a CHECKBOX in each row so that I can edit and update its record.

Do you want to add new rows and post or edit existing rows with checkbox? — Majedur
– Majedur, Commented Jan 15, 2019 at 10:20

davidkonrad · Accepted Answer · 2019-01-15 11:37:52Z

1

As mentioned by yujinpan you can use the select extension. Or simply just render out a checkbox yourself:

$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"),
  ...
]

Now you can associate delegated event handlers with the checkboxes through the .check class.

Use a dtInstance as explained here or in the docs here (look at the bottom of page). Now you could do something like

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

edited Jan 15, 2019 at 11:37

answered Jan 15, 2019 at 10:27

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

8 Comments

HEEN Over a year ago

I got the checkbox as needed. Now, how to add title and oncheck of checkbox to get the current row data ?? any idea sir. Thanks for your useful answer

HEEN Over a year ago

Nothing in alert for alert(data); ?? how to check values are coming properly

HEEN Over a year ago

also getting error as Uncaught TypeError: Cannot read property 'DataTable' of undefined

davidkonrad Over a year ago

@BN, have you used a callback to set the dtInstance? Use the last example in the linked SO thread -> stackoverflow.com/a/50624700/1407478

HEEN Over a year ago

tried like this $scope.dtInstance = {}; but still not working. same error. also added in table like this

<table id="entry-grid" datatable="" dtinstance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table>

|

yujinpan · Accepted Answer · 2019-01-15 10:15:17Z

1

Is it this one？the select plugin. withSelect

answered Jan 15, 2019 at 10:15

yujinpan

5193 silver badges6 bronze badges

2 Comments

HEEN Over a year ago

yes this one.. but its not getting selected. and also what If I want to select all at once ??

yujinpan Over a year ago

Yes, look at this..rowSelect

Collectives™ on Stack Overflow

Add a checkbox in each row for datatable jQuery using Angular.js

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related