0

I have this script to display data to datatables: 

<script type="text/javascript">

$('#btnRoster').click(function (e) {

    $('#dataTable').dataTable().fnDestroy();
    e.preventDefault();

    $.ajax({

        url: '@Url.Action("GetRoster", "Home")',
        type: 'GET',
        dataType: "json",
        success: function (response) {

            var table = $('#dataTable').dataTable({
                data: response,

                columns: [

                    { 'data': 'Id' },
                    { 'data': 'Name' },
                    { 'data': 'Project' },
                    { 'data': 'Geo.GeoName' },
                    { 'data': 'Tower.TowerName' },
                    { 'data': 'Region.RegionName' },
                    { 'data': 'WBS.WBSName' },
                    { 'data': 'Process.ProcessName' },
                    { 'data': 'PrimaryTeam.PrimaryTeamName' },                        
                    { 'data': 'IsActive' },   
                    { 'data': 'Gender' },
                    { 'data': 'Level' },
                    { 'data': 'ShiftStart' },
                    { 'data': 'ShiftEnd' },
                    { 'data': 'Comment' },
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '<button class=btn btn-primary btn-block>Edit</button>'
                    }
                ],

                "order": [[2, 'asc']],

                columnDefs: [
                    { "visible": false, "targets": 0 },

The above actually works, but when I want to check the row count of datatable using the below code, it returning 0. For testing purposes, I assign it to the tr click to get the row count.

<script type="text/javascript">

$(document).ready(function () {


    var table = $('#dataTable').DataTable();
    $("#dataTable").on("click", "tr", function () {

        var data = table
                    .rows()
                    .data();

        alert('The table has ' + data.length + ' records');
    });

});



</script>

Why is it returning 0 where in fact the data is there?

Maistrenko Vitalii
  • 994
  • 1
  • 8
  • 16
Hudas Iskaryote
  • 31
  • 8
  • 1
    The click event should reference the variable "table" created in the success function in ajax instead of recreated datatable object in your test script. – samabcde Mar 26 '18 at 04:05
  • so it should be inside the success? – Hudas Iskaryote Mar 26 '18 at 04:06
  • Yes, for your case. However, it is not usual to recreate the dataTable object each time for searching, you can try the option 'ajax' of dataTable .Please refer to the link https://datatables.net/reference/option/ajax – samabcde Mar 26 '18 at 04:16
  • @samabcde, it now throws an error: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'rows' I've moved the code inside the ajax success. $("#dataTable").on("click", "tr", function () { var data = table .rows() .data(); alert('The table has ' + data.length + ' records'); }); – Hudas Iskaryote Mar 26 '18 at 05:25
  • Can you post the full updated js method? – samabcde Mar 26 '18 at 05:34
  • here it is: https://jsfiddle.net/o6710mqj/ – Hudas Iskaryote Mar 26 '18 at 05:36
  • update to var data = table.api().rows().data(); – samabcde Mar 26 '18 at 05:53
  • thank you @samabcde, it's working now, question, do i always need to include the api() method? – Hudas Iskaryote Mar 26 '18 at 06:22
  • You are using the old version method, check the following link for details https://stackoverflow.com/questions/25207147/datatable-vs-datatable-why-is-there-a-difference-and-how-do-i-make-them-w – samabcde Mar 26 '18 at 06:27

0 Answers0