lundi 14 mars 2022

How to add a checkbox and a button to a datatable with jQuery?

I was looking for some answers and wasn't able to find the one suitable for my case.

I have a table in asp page and its columns are being defined in jQuery:

Here is asp page:

<table id="tblImportantNotes" class="display records">
    <thead>
        <tr>
            <th>Created Date</th>
            <th>Created By</th>
            <th>Category</th>
            <th>Note</th>
            <th>Application</th>
        </tr>
    </thead>
</table>

Here is jQuery:

$("#tblImportantNotes").dataTable(
  {
    "sDom": 't<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"i>',
    "aoColumns": [
        { "sType": "string", "bSortable": true }, //CreatedDate 
        {"sType": "string", "bSortable": true }, //CreatedBy 
        {"sType": "string", "bSortable": true }, //Category 
        { "sType": "string", "bSortable": false }, //Note   
        { "sType": "string", "bSortable": true } //Application 
     ],
        "sScrollY": "180px",
        "bPaginate": false,
        "bFilter": false,
        "aaSorting": [],
        "bAutoWidth": false,
        "bInfo": true,
        "bJQueryUI": true
     });

That's how the table gets populated from the database on a click event:

myself._findjcontrol("btn_AddImpotrantNote").button().click(function () {
   var merchant = myself.get_MyAccount();
   if (merchant != null) {
      Web.Services.MyService.GetImportantNotes(m.ID, function (result) {
      ImportantNotes = [];
      for (var ctr = 0; ctr < result.length; ctr++) {
           var item = result[ctr];
           ImportantNotes[ImportantNotes.length] = [item.CreatedDate.toString("MM/dd/yyyy HH:mm:ss"), item.CreatedBy, item.CategoryName == null ? '' : item.CategoryName, item.Note, item.ApplicationName];
      }
      $('#tblImportantNotes').dataTable().fnClearTable();
      if (ImportantNotes.length>0)
           $('#tblImportantNotes').dataTable().fnAddData(ImportantNotes);
      });
}

How should I add a checkbox in the first column and a button as the last column?




Aucun commentaire:

Enregistrer un commentaire