dataTables Button / Ajax / Data modification

zayders

Hello,

i include a checkbox in my dataTable that color my row when it is check and register if the button is check in my database.
To save the button status and color , i use ajax with jquery (out of datatable component) and css...

So it's alright for this part. When i want to have the pdf of my table, all the line wich were already check have colored row. So it's ok too.

The problem is : when i'm on my datatable, i check a button, the row color change, but the new color of the checked row is not apply in the pdf.
Here my ajax code (this is in a loop), the class allow to change color :

$('#urgent{{trial.id}}').change(function()
    {
        $.ajax({
            url : url,
            data : data,
            success: function(response) {
                var r = '.row'+response['id'];
                if(response['value'] =='true')
                {
                  $(r).removeClass("normal_trial").addClass("urgent_trial");
                  $('#urgentHidden'+response['id']).html(1);
                }
                else
                {
                  $(r).removeClass("urgent_trial").addClass("normal_trial");
                  $('#urgentHidden'+response['id']).html(0);
                }
            },
            error: function(e)
            {       
                alert(JSON.stringify(e, null, 4));                           
            },
        });
    });

I store hidden value (1 or 0) to apply style in my pdf : 1 = color row, 0 = normal row
The color row is manage like this :

if(line[8].text == 1)
{
   bod.push([{text:line[0].text, style:'tableUrgent'},{text:line[1].text, style:'tableUrgent', alignment: 'center'},{text:line[2].text, style:'tableUrgent', alignment: 'center'},{text:line[3].text, style:'tableUrgent', alignment: 'center'},{text:line[4].text, style:'tableUrgent', alignment: 'center'},{text:line[5].text, style:'tableUrgent', alignment: 'center'}]);
}

So, how can i have my ajax modification apply to my PDF ? I tried with table.ajax.reload(), but the source of my table is not made with ajax in dataTable so it give me errors, and i don't have success with 'draw()' method. Can you help me ?

colin

Hi @zayders ,

This example here may help, it's conditionally changing the colour of a cell on the PDF export.

If it doesn't, we're happy to help, but it would help if you could link to a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

zayders

Hi !
i solve my problem with this code :

    //Event click on urgent button to color the row
    $('#example1 tbody').on( 'click', '.urgent', function () {
        // attribute name contain the object ID
        var n = $(this).attr('name');
        cell = table.cell( $(this).parent() );

        /*    call draw() to update the table's draw state with the new data
            * draw false = stay on current page when redraw
            * Apply change in DB with ajax
        */
        if($(this).is(':checked'))
        {
            cell.data("<input type=\"checkbox\" name=\""+n+"\" class=\"urgent\" id=\"urgent"+n+"\" checked><p id=\"urgentHidden"+n+"\" hidden>1</p>").draw(false);
            urgentAjax(n);
        }
        else
        {
            cell.data("<input type=\"checkbox\" name=\""+n+"\" class=\"urgent\" id=\"urgent"+n+"\"><p id=\"urgentHidden"+n+"\" hidden>0</p>").draw(false);
            urgentAjax(n);
        }- 
    } );

And my ajax function :

function urgentAjax(index)
    {
        $.ajax({

            url : "{{path('eagle_program_ajax_trial_urgent')}}",
            data : {"value" : $('#urgent'+index).is(':checked'), "id" : index},

            success: function(response) {
                var r = '.row'+response['id'];

                if(response['value'] =='true')
                    $(r).removeClass("normal_trial").addClass("urgent_trial");
                else
                    $(r).removeClass("urgent_trial").addClass("normal_trial");

            },
            error: function(e)
            {       
                alert(JSON.stringify(e, null, 4));                           
            },
        });
    }

This is the 'draw()' on the check cell which was missing. It permet to update the table and apply the change value on the PDF. With my hidden value, i can detect in the pdf, lines which are dynamicly change.

I hope i was clear on my question and my answer, i'm not very good to write in english

Thanks for your reply !
Hope it will help !