0

I am creating a data table which has an onclick event for 3 columns. When clicking any of the columns on page 1 everything works as expected. If I use the pagination to go to page 2 then the onclick still returns the corresponding row from page 1. I have read multiple threads about how the data table is not rendering again, and think this could be the issue. However, I cannot seem to get anything. I have tried to work, any help would be appreciated.

@section Scripts
<script>


    $('#allCustomers tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + '" />');
    });

 
    $(document).ready(function () {
        // inside function to pass paramters; showclosed
        function buildDataTable(showClosed = false) {
            $('#allCustomers').DataTable({
                "ajax": {
                    url: "/Customer/GetAllCustomersTableJson",
                    type: "POST",
                    dataType: 'json',
                    dataSrc: "",
                    data: { showClosed: showClosed },
                },
                dom: 'lrtip',               
                columns: [
                    {
                        data: "CompanyName", title: "Company", class: 'dataTable_link' },
                    { data: "guid_Company", title: "ID", visible: false },
                    { data: "Closed", title: "Closed", visible: false },
                    { data: "SupportOnHold", title: "SupportOnHold", visible: false },
                    { data: "NoUpdates", title: "NoUpdates", visible: false },
                { data: "PhoneNumber", title: "Phone" },
                { data: "Layouts", title: "Layouts" },
                { data: "LastLiteUpdate", title: "Last Lite", /*render: DataTable.render.datetime('DD/MM/YYYY') */},
                { data: "LastCheckIn", title: "Check In", render: DataTable.render.datetime('DD/MM/YYYY') },
                { data: "Calls30D", title: "C30D", type: 'integer', class: 'dataTable_link' },
                { data: "Calls12M", title: "C12M", type: 'integer', class: 'dataTable_link' },
                    { data: "Tickets12M", title: "C12M", type: 'integer' },],
                columnDefs:
                    [
                        {
                            targets: [7],
                            render: function (data, type, row, meta) {
                                moment.locale('en-gb');

                                var styleClass = 'Ruda-Regular';

                                var dateDiff = new Date();
                                dateDiff.setMonth(dateDiff.getMonth() - 12);   
                                dateDiff = moment(dateDiff).format('DD/MM/YYYY');

                                var litedate = moment(row.LastLiteUpdate).format('DD/MM/YYYY');
                             
                                if (Date.parse(litedate) < Date.parse(dateDiff)) {
                                    console.log(Date.parse(litedate) + ' ' + Date.parse(dateDiff));
                                    styleClass = 'dataTable_1YearOld';
                                    return '<span class="' + styleClass + '">' + litedate + '</span>';
                                }

                                return '<span class="' + styleClass + '">' + litedate + '</span>';
                            }                            
                        },
                        {
                            targets: [0],
                            render: function (data, type, row, meta) {                              
                                var styleClass = 'dataTable_link';
                                if (row.Closed == true) {
                                    styleClass = 'dataTable_closed';
                                    return '<span class="' + styleClass + '">' + data + '</span>';
                                }
                                else if (row.SupportOnHold == true) {
                                    styleClass = 'dataTable_Onhold';
                                    return '<span class="' + styleClass + '">' + data + '</span>';
                                }
                                else if (row.NoUpdates == true) {
                                    styleClass = 'dataTable_NoUpdates';
                                     return '<span class="' + styleClass + '">' + data + '</span>';
                                }
                                return '<span class="' + styleClass + '">' + data + '</span>';
                            },
                        },
                        
                    ],
              
               
                initComplete: function () {
                    // Apply the search
                    this.api()
                        .columns()
                        .every(function () {
                            var that = this;

                            $('input', this.footer()).on('keyup change clear', function () {
                                if (that.search() !== this.value) {
                                    that.search(this.value).draw();
                                }
                            });
                        });



                },
            });
        }
       

      if ('@ViewBag.showClosed' == "True")
      {
          document.getElementById("cbShowClosed").checked = true;
          buildDataTable(true);
      }
      else
      {
          document.getElementById("cbShowClosed").checked = false;
          buildDataTable(false);
        }

     

        var table = $('#allCustomers').DataTable();

        $('#allCustomers').on('click', 'td', function () {

            var td_index = $(this).index();
            var tr_index = $(this).parent().index();

            var date = new Date();

            var nameCompany = table.cells({ row: tr_index, column: 0 }).data()[0];
            nameCompany = nameCompany.replace("&", "%26");

            var guidCompany = table.cells({ row: tr_index, column: 1 }).data()[0];

            switch (td_index) {
                case 0:
                    location.href = '/Customer/GetCustomer?guid_Company=' + guidCompany + '&CompanyNameWithAlsoKnown=' + nameCompany;
                    break;
                case 5:
                    var dateDiff = new Date();
                    dateDiff.setMonth(dateDiff.getMonth() - 1);
                    location.href = '/Customer/GetCustomer?datePickerRange=' + date.toLocaleDateString() + ' - ' + dateDiff.toLocaleDateString() + '&guid_Company=' + guidCompany + '&CompanyNameWithAlsoKnown=' + nameCompany + '&openPartial=Activity';

                    break;
                case 6:
                    var dateDiff = new Date();
                    dateDiff.setMonth(dateDiff.getMonth() - 12);
                    location.href = '/Customer/GetCustomer?datePickerRange=' + date.toLocaleDateString() + ' - ' + dateDiff.toLocaleDateString() + '&guid_Company=' + guidCompany + '&CompanyNameWithAlsoKnown=' + nameCompany + '&openPartial=Activity';
                    break;
            }

        });
    


    });

    function showCloseChange(cb) {
        window.location.href = 'GetAllCustomersJson?showClosed=' + cb.checked;
    };

</script>

0

You must log in to answer this question.

Browse other questions tagged .