JS Scripts not working after Server Side Pagination

lunguc@hotmail.com

Hi Allan, Hi all,

I populated a data table with Yajra class. The last column had 3 actions buttons (a href tags). First and second buttons works fine, but third not.
I know it's necessarly to define the route in drawCallback. I can replace the attribute 'data-ruta' with the route but still not working.

I run
Yajra\DataTables\Facades\DataTables ver. 8.0,
DataTables 1.10.16
Laravel 5.5

Thanks.

JS functions:

           $('#dt').dataTable({
                "responsive": true,
                "bSort": false,
                "language": {                
                    "url": '{{ URL::to("js/backend/plugin/datatables/Romanian.json") }}'
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    'url' : "{{ route('admin.imobil.imobile_list_ssp') }}",
                    'type': 'POST'
                },
                "columns":[
                    { "data": "adresa", "name": "adresa", render: $.fn.dataTable.render.text() },
                    { "data": "regiune", "name": "regiune", render: $.fn.dataTable.render.text() },
                    { "data": "judet", "name": "judet", render: $.fn.dataTable.render.text() },
                    { "data": "localitate", "name": "localitate", render: $.fn.dataTable.render.text() },
                    { "data": "numar_apartamente", "name": "numar_apartamente", "className": "text-center" },
                    { "data": "numar_locatari", "name": "numar_locatari", "className": "text-center" },
                    { "data": "scari", "name": "scari", render: $.fn.dataTable.render.text(), "className": "text-center" },
                    { "data": "suprafata_utila_masurata", "name": "suprafata_utila_masurata", "className": "text-right" },
                    { "data": "actions", "name": "actions", "className": "text-center" }
                ],   
                initComplete: function () {
                  this.api().columns().every(function () {
                      var column = this;
                      var input = document.createElement("input");
                      $(input).appendTo($(column.footer()).empty())
                      .on('change', function () {
                          column.search($(this).val(), false, false, true).draw();
                      });
                  });
                },
  
                "drawCallback": function( settings ) {
                    this.api().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                        this.nodes(rowIdx).to$().find('td:last a:last i').attr('data-ruta', '{{ route("admin.imobil.imobil_delete") }}');
                    })
                },
            });

$('.fa-trash-o').click(function(){
    var id = $(this).closest('tr').data('id');                  
    var url_delete = $('.fa-trash-o')[0].getAttribute('data-ruta');
    console.log(url_delete);
})

Controller

    public function getImobileServerSideProcessing()
    {
        $imobile = self::getImobil(null);
        return Datatables::of($imobile)
            ->editColumn('suprafata_utila_masurata', function ($imobil) {
                return number_format($imobil->suprafata_utila_masurata, 2, ',', '.');
            })        
            ->addColumn('actions', function($imobil) {
                return 
                    '<a href="' . route('admin.imobil.imobil_create_edit', $imobil->id) . '">                        
                          <i class="fa fa-pencil-square-o" 
                          title="' . trans('lareab.view_or_edit') . '"></i>
                     </a>' .
                    '<a href="' . route('admin.imobil.imobil_optiuni', $imobil->id) . '">
                          <i class="fa fa-arrows-alt" 
                          title="'. trans('lareab.imobil.date_imobil') . '"></i>
                     </a>' .
                     '<a href="#"> <i class="fa fa-trash-o text-danger" data-ruta="__replace_this__" title="' . trans('buttons.general.crud.delete') . '"></i></a>';                 
                })
            ->rawColumns(['actions'])
            ->make(true);            
    }

lunguc@hotmail.com

I found a solution but I don't like it very much.

This code is located on another js file.

$('.fa-trash-o').click(function(){
    var id = $(this).closest('tr').data('id');                 
    var url_delete = $('.fa-trash-o')[0].getAttribute('data-ruta');
    console.log(url_delete);
    //
})

The solution is to reload the script on drawCallback

                drawCallback: function( settings ) {
                    this.api().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                        this.nodes(rowIdx).to$().find('td:last a:last i').attr('data-ruta', '{{ route("admin.imobil.imobil_delete") }}');                        
                    })

                    $.getScript("../js/codecorner.js", function() {
                      console.log("Script loaded.");
                    });
                },

I don't know if it is a good solution. Please help.

kthorngren

I might be missing something in your description but it sounds like your event handlers work on the first page but not the second. If thats the case take a look at the second FAQ here:
https://datatables.net/faqs/index#Most-common-FAQs

Kevin

lunguc@hotmail.com

Hi Kevin,
It's not the case. Without reloading the js script the click event not occurs.

kthorngren

I think if you change your event handler to look like this it will work:

$$('#dt tbody').on('click', '.fa-trash-o', function(){
    var id = $(this).closest('tr').data('id');                 
    var url_delete = $('.fa-trash-o')[0].getAttribute('data-ruta');
    console.log(url_delete);
})

I built a simple example here with server side processing:
http://live.datatables.net/fecejoca/1/edit

With your static event listener the click events don't work at all. But if you comment out the line $('.test-me').click(function(){ and uncomment the event listener above it will work on all pages.

Kevin

lunguc@hotmail.com

It's ok what you say Kevin and it's working only if the event handler it's defined on the same script. If it's defined on external script, still not working.

Catalin

kthorngren

Are you loading that script at the top of your page before the table #dt is created? If so then you need to load the script at the end of your file so the table exists when the scrip tis executed.

Kevin

lunguc@hotmail.com

I'm loading the script at the end of the page. This behavior occurs only in pages that make server side paging. In other pages with client side paging I have no problem.
Anyway if it's working reloading the script on each request, for the moment I leave it as is.

Thanks for your time.