Print button will not get current table data, just initial data

Print button will not get current table data, just initial data

bmcn99bmcn99 Posts: 5Questions: 1Answers: 0
edited May 10 in Free community support

I create my data table and include the standard print button with these options:

buttons: [ { extend: "print", exportOptions: { stripHtml: false, }, customize: filterStuff }, ]

And I have it working just how I want it to. The problem I'm discovering now is that any changes I make to the table after it is first drawn are not shown in the print. I have checkboxes in a few columns, and input fields, and I also tried manually changing hard coded text with the inspector to see if it would pick up on that change but it did not, and will only show the initial state of the table.

Is there a way I can print the table with it's current data? I tried using the draw() method but that didn't do it, and googling the problem is really coming up with nothing.

Edit: I should maybe include that I am not using ajax to populate the table so I can't use ajax.reload as far as I know

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 5,541Questions: 19Answers: 1,232

    How are you updating the table?

    If you are not using Datatables APIs, like row().data(), cell().data(), etc, then Datatables won't know about the updates and won't update it's data cache. The Datatables data cache is used for exporting, sorting and searching.

    If you aren't using and don't want to use Datatables API's then you can use one of the invalidate APIs like row().invalidate() to have Datatalbes update its cache.

    If this doesn't help then please post a link to your page or a test case so we can see what you are doing and offer more specific options to fix it.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • bmcn99bmcn99 Posts: 5Questions: 1Answers: 0

    We added the datatables later on so all the changes are not going through the datatables API.

    I just tried the invalidate bit and it doesn't look like it had any effect.

    I think you should be able to access my test case here, try checking a few boxes and then click "Print the list" : http://live.datatables.net/kegirife/1/edit?html,js,output

    I had to click on "Run with JS" first before it worked, and the print doesn't actually offer me a print, it quickly closes, but you can see the html it's working with before it closes. I think this is a quirk from running it through their site, since It offers the print just fine elsewhere?

    Thanks for taking a look.

  • colincolin Posts: 4,686Questions: 0Answers: 822

    Hi @bmcn99 ,

    This thread here talks about how to use orthogonal data to export the current values. This is an example that is similar to what you want and should give you a direction.

    Cheers,

    Colin

  • bmcn99bmcn99 Posts: 5Questions: 1Answers: 0

    Sorry I wasn't describing my problem well, in their example there I can print off the filtered table easily and get the result I want:

    But if I manually change the values in that table like so:

    Then the PDF I print off will NOT have those values you see in the screenshot, but rather the initial values. How can I print off the values the table has when I hit the print button?

  • colincolin Posts: 4,686Questions: 0Answers: 822

    Hi @bmcn99 ,

    Yep, that example I posted shows how to do that - there it's showing the live value of the checkbox. You need to use orthogonal data for the export to show the correct values. The export function should retrieve the current values, so you'll need to read them back out of the DOM.

    Cheers,

    Colin

  • bmcn99bmcn99 Posts: 5Questions: 1Answers: 0

    I'm not able to understand how to tell the functions to look to the current table data for it's data source.

    From what I'm reading the render function() SHOULD be providing me with data from the table as it is NOW and not the initial data, but any changes I make to the table are completely ignored and I always am looking at data from the initial rendering. According to https://datatables.net/reference/option/columns.data this should only be happening if I provide null as the 'data:', am I understanding that correctly?

    From the example I see how the render could be done differently based on the type property being 'display' or 'myExport' (or others). But if I console.log the contents of data for each, they are the same, even if I have changed them.

    I tried grabbing the ID from the render's data parameter, then at the time of render going out and retrieving it's current value with $('#'+targetID), which I was able to get working for the first page of the table.

    This won't work in the end however because on any pages hidden by pagination I can't access elements using $('#'+targetID) since they are seemingly made invisible to the DOM, and can only rely on the initial state of the element given to me by the data variable in the render function.

    You said that the export function should retrieve the current values but since I'm not seeing that is there a setting I missed?

    buttons: [
        {
            extend: "print",
            exportOptions: {
                stripHtml: false,
                orthogonal: "myExport"
            },
        },
    ],columns: [{
        data: "Col Name"
      },
      {
        data: "Name"
      },
      {
        data: "Index"
      },
      {
        data: "HCP"
      },
      {
        data: "Gender"
      },
      {
        data: "Paid"
      },
      {
        data: "Checked In"
      },
      {
        data: "No Show"
      },
      {
        data: 'Disqualified',//When either set to this or left out entirely seems to just change the row variable below and how it references that column
        render: function(data, type, row) {
            
            if(inputID == "DQ509" && type == "myExport"){//just show the one row we're tinkering with
              
              console.log(data);//Does not update to represent the current state of the table
              console.log(type);//type will change from display to myExport, does not change data available though
              console.log(row);//Does not get updated values either, but will change from Disqualified to 8 depending on 'data:' above
              
          }
        }
      }
    
  • colincolin Posts: 4,686Questions: 0Answers: 822
    Answer ✓

    Hi @bmcn99 ,

    Yep, as I said you have to orthogonal data to get the current values from the table's node - see example here.

    Hope that does the trick,

    Cheers,

    Colin

  • bmcn99bmcn99 Posts: 5Questions: 1Answers: 0

    Thanks Colin, that works great! I have a much better understanding of what's going on now too.

Sign In or Register to comment.