How to select all checkbox in Datatables, Angular

Question

I am using Datatable in Angular, and I want to use select all checkboxes functionality in that grid. I tried with below code but getting error

onselectAll(){
    this.dtTrigger.next();
    this.datatableElement.dtInstance.then((dtInstance: any) => {
      dtInstance.rows().select();
      this.dtTrigger.next();
    });    
}

error : TypeError: dtInstance.rows(...).select is not a function

Function for intialising datatable :

bindDataTable() {

var that = this;
this.dtOptions = {
  order: [[1, 'asc']],
  lengthMenu: [10, 25, 50, 75, 100],
  language: { paginate: { next: '&#8594;', previous: '&#8592;', first: '', last: '' }, searchPlaceholder: "Search here....", search: "" },
  info: false,
  // dom: "Rlfrtip",
  dom: 'Bfrtip',
  rowGroup: {
    dataSrc: 'group'
},
  select: {
    style: 'os',
    selector: 'td:first-child'
  },
  columnDefs: [{
    targets: 0,
    width: 20,
    orderable: false,
    className: 'select-checkbox'
  },
  {
    targets: 1,

  }
  ],
  serverSide: true,
  processing: true,
  ajax: (dataTablesParameters: any, callback) => {
    that.spinner.show();
    var start = dataTablesParameters.start;
    var recsPerPage = dataTablesParameters.length;
    var search = dataTablesParameters.search.value;
    var sortColumn = dataTablesParameters.order[0].column;
    var sortOrder = dataTablesParameters.order[0].dir;
    var orderby = "";
    this.baseAPIService.post<any[]>("/url",
      {
        "category_id": this.categoryIDs,
        "product_name": this.productNames,
        "search_text": "",
        "sku": this.skuList,
        "shop_id": this.model.shopId_screen,
        "vendor_id": this.vendorId
      })
      .subscribe(resp => {
        this.spinner.hide();
        this.productList = resp['data'];

        callback({
          recordsTotal: resp['count'],
          recordsFiltered: resp['count'],
          data: resp['data']
        });

        var btnEdits: any = document.getElementsByClassName("btnEdit");
        for (let btn of btnEdits) {
          btn.onclick = (event) => {
            var id = btn.getAttribute("data-id");
           
              $("#txt-final_stock-" + id).hide();       //final stock
              $("#spn-final_stock-" + id).text(final).show();
            }
            $("#txt-is_selected-" + id).attr('checked', 'checked');
            $("#btnEdit-" + id).hide();
            $("#btnSave-" + id).show();
            $("#btnCancel-" + id).show();
          }
        }

        var btnSaves: any = document.getElementsByClassName("btnSave");
        for (let btn of btnSaves) {
          btn.onclick = (event) => {
            var id = btn.getAttribute("data-id");
            $("#btnEdit-" + id).show();
            $("#btnSave-" + id).hide();
            $("#btnCancel-" + id).hide();
            })

          }
        }

        var btnCancels: any = document.getElementsByClassName("btnCancel");
        for (let btn of btnCancels) {
          btn.onclick = (event) => {
            var id = btn.getAttribute("data-id");
            $("#spn-final_stock-" + id).show();

            $("#txt-final_stock-" + id).hide();

            $("#btnEdit-" + id).show();
            $("#btnSave-" + id).hide();
            $("#btnCancel-" + id).hide();
          }
        }

        var btnSelectedProducts: any = document.getElementsByClassName("chkProduct");
        for (let btn of btnSelectedProducts) {
          btn.onclick = (event) => {
            var id = btn.getAttribute("data-id");
            var isSelected = $("#txt-is_selected-" + id).is(":checked");

            var model = this.updatedProducts.filter(x => x.varientid == id);
            if (model.length == 0) {
              model = this.products.filter(x => x.varientid == id);
              this.updatedProducts.push(model[0]);
            }
            this.updatedProducts.filter(x => x.varientid == id).map(x => x['is_selected'] = isSelected);

          }
        }
      },
        error => {
          this.spinner.hide();
          callback({
            recordsTotal: 0,
            recordsFiltered: 0,
            data: []
          });
        })
  },


  columns: [
    {
      data: null, orderable: false, render: (data, type, row, meta) => {
        var isSelected = false;
        var model = this.updatedProducts.filter(x => x.varientid == row.varientid);
        if (model.length == 0) {
          model = this.products.filter(x => x.varientid == row.varientid);
        }

        if (model.length > 0 && model[0]['is_selected'] == true) {
          return '<div class="form-check col-md-6 text-center p-0 m-0 mt-1 s-info">' +
            '<input type="checkbox" class="form-check-input chkProduct" checked data-id="' + row.varientid + '" id="txt-is_selected-' + row.varientid + '">' +
            '</div>';
        } else {
          return '<div class="form-check col-md-6 text-center p-0 m-0 mt-1 s-info">' +
            '<input type="checkbox" class="form-check-input chkProduct" data-id="' + row.varientid + '" id="txt-is_selected-' + row.varientid + '">' +
            '</div>';
        }
      }
    },
    { data: "productname" },
    { data: "brandname" },
    { data: 'sku' },
    { data: "varient_sku" },
    { data: "varientid" },
    {
      orderable: false,
      className: "text-center",
      render: (data, type, row, meta) => {
        return '<a class="text-center btnEdit" id="btnEdit-' + row.varientid + '" data-id="' + row.varientid + '"><svg  width="18px" height="18px" id="data-edit"></svg></a>&nbsp;&nbsp;' +
          '<a class="text-center btnSave" id="btnSave-' + row.varientid + '" style="display:none;" data-id="' + row.varientid + '"><svg width="18px" height="18px" enable-background="new 0 0 512.007 512.007" height="512"</svg></a>' +
          '&nbsp;&nbsp;<a class="text-center btnCancel" id="btnCancel-' + row.varientid + '" style="display:none;" data-id="' + row.varientid + '"><svg width="13px" height="13px" id="data-delete">'
      }
    }

  ]
};

}

HTML :

 <table id="stock-table" class="table row-border table-responsive hover"
        datatable [dtOptions]="dtOptions">
    <thead>
      <tr>
        <th class="select-checkbox"><input id="checkBox" type="checkbox" (click)="onselectAll()"></th>
        <th>Product Name</th>
        <th>Brand</th>
        <th>SKU Code</th>
        <th>Varient SKU</th>
        <th>Varient</th>
        <th>Current stock</th>
        <th>Final Stock</th>
        <th>Update/Cancel</th>
      </tr>
   </thead>
   <tbody>

   </tbody>
</table>

please give me some solutions, how can i resolve this issue.

The official docs are somewhat tricky to navigate in this case but you'll most likely need to iterate over the rows property and call select (as rows should be an array or a list). — Aldin Bradaric
– Aldin Bradaric, Commented Jul 5, 2021 at 7:06
yaa, yes.. thanks @AldinBradaric for our response and if u knw can u pls tell me why i getting this error dtInstance.rows(...).select is not a function — Shweta
– Shweta, Commented Jul 5, 2021 at 7:24
Because rows is an array or a list and those two don't have a function called select. If the docs aren't of any help, I would try console.log(dtInstance.rows) to see what that property looks like and then take it from there. — Aldin Bradaric
– Aldin Bradaric, Commented Jul 5, 2021 at 9:21

Shweta · Accepted Answer · 2021-07-05 10:59:30Z

0

I got solution from this link Angular 6 - Datatables

onselectAll(){
 
    this.dtTrigger.next();
    this.datatableElement.dtInstance.then((dtInstance: any) => {
      this.isAllChecked = $('th', dtInstance.table(0).node()).find('[type="checkbox"]')[0]['checked'];
      var elts = [];
      $('td', dtInstance.table(0).node()).find('[type="checkbox"]')
      var el = $('td', dtInstance.table(0).node()).find('[type="checkbox"]')
      elts.push(el)
      var temp = elts[0]
      for (const elt of temp) {
        elt.checked = this.isAllChecked;
        //$("#txt-is_selected-" + elt.dataset['id']).attr('checked', 'checked');     
    };
    });       
}

answered Jul 5, 2021 at 10:59

Shweta

292 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

How to select all checkbox in Datatables, Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related