Answers

• kthorngren Posts: 21,546Questions: 26Answers: 4,988

  January 2020

  The column numbers start at 0. api.column(3) is the forth column. If this doesn't help then we will need to see an example of the problem in order to help. Please post a link to your page or a test case replicating the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• malhamoud Posts: 11Questions: 2Answers: 0

  January 2020

  I tried to but because I am binding data from an api to generate the table content I could not figure out how to use codepin or http://live.datatables.net/.
  however;
  I am binding the quantity of and multiply it with the price and after that I try to sum the results in one field.

  it seems to me it is starting to sum before the multiply because when I change the column the sum works fine
• kthorngren Posts: 21,546Questions: 26Answers: 4,988

  January 2020 edited January 2020

  You can take an example of your data and use data to feed it into Datatables, like this example. Without seeing what you are doing it will be impossible to provide suggestions.

  Kevin
• malhamoud Posts: 11Questions: 2Answers: 0

  January 2020

  I tried but its not working
  http://live.datatables.net/giponiyi/1/
• kthorngren Posts: 21,546Questions: 26Answers: 4,988

  January 2020

  You have a lot of syntax errors to work through. However I may be able to provide a starting point:

  You have:

        { title: "Price" , render: function(data){
           price = data;
               return "<p>" + price + "</p>";
        } },
         { title: "Quantity", render: function(data){
               qty = data;
               return "<p>" + qty + "</p>";
              } },
        { title: "subtotal.", render: finction(){
         var subTotal
         subTotal= price*qty;
         return "<p>" + subTotal + "</p>";
        } 
  

  Take a look at the columns.render docs and you will see that there are other parameters for the function; ( data, type, row, meta ). Instead of trying to use global variables to store the data from different columns you can use the row parameter to access and column data for that row. Your code should look more like this:

        { title: "Price" , render: function(data){
               return "<p>" + data + "</p>";
        } },
         { title: "Quantity", render: function(data){
               return "<p>" + data + "</p>";
              } },
        { title: "subtotal.", render: function( data, type, row ){
         var subTotal = row[0] * row[1];
         return "<p>" + subTotal + "</p>";
        } 
  

  To make your test case run you will need to fix the syntax and typo errors. Plus you will need to add the jQuery and Datatables JS and CSS includes.

  Kevin
• malhamoud Posts: 11Questions: 2Answers: 0

  January 2020

  Thank you very much, I will try to fix the syntax error and git back to you.
• malhamoud Posts: 11Questions: 2Answers: 0

  January 2020

  I tried to fix the errors and I did there is no more errors, but its not showing anything and I am unable to test the footerCallback. I even tried to somualte the example.

  please take a look:
  http://live.datatables.net/giponiyi/3/
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2020

  You haven't included any libraries. Please provide a test case that demonstrates the issue you want help with.

  Colin
• kthorngren Posts: 21,546Questions: 26Answers: 4,988

  January 2020

  Like Colin said in the HTML Tab you removed all the libraries and other code. Take a look at http://live.datatables.net/ to see what you should have. You can remove the table that is there but the rest should be there for a standard Datatables environment.

  Additionally you need to have a tfoot in order to have the footerCallback code place the sums in the footer. If you don't nothing will appear. Finally you are trying to sum a column that has rendered data. You can do this but it needs to use cells().render() instead of column().data(). Take a look at Colin's answer and example in this thread to see how to make this change.

  Kevin
• malhamoud Posts: 11Questions: 2Answers: 0

  January 2020

  I did add the libraries and add every thing was missing on the html side, but still nothing appears ,

  and I tried cells().render(). but I don't know if I am doing it right or not because it shows (the first cell data) instead of sum, I tried adding index to cells, but it didn't work either

  http://live.datatables.net/rivugeta/1/
• kthorngren Posts: 21,546Questions: 26Answers: 4,988

  January 2020 edited January 2020

  I did add the libraries and add every thing was missing on the html side, but still nothing appears

  The place to start is to look at the browser's console for errors. The test case is getting these two errors:

  Uncaught ReferenceError: jQuery is not defined

  Uncaught TypeError: $(...).DataTable is not a function

  This is due to having the JS libraries in the wrong order. After moving jquery.js to the top the next error is this:

  VM227 jquery-3.4.1.min.js:2 Uncaught TypeError: Cannot set property 'nTf' of undefined

  You defined 5 columns in the HTML table but only 4 using columns. They need to match in number. I removed the last column in HTML.

  Now you are getting NaN in the Subtotal column. The reason is you have subTotal= row.Price*row.Quantity; but your data is array based, ie, you haven't defined columns.data. See more info about Datatables data structures here. Changed the code to use array notation: subTotal= row[1]*row[2];.

  Looks like I forgot to post the link to the thread with Colin's example.

  Applying Colin's example we get this in the footer: (NaN SAR).

  Using console.log in the intVal function we see this output for the values:

        var intVal = function (i) {
          console.log(i)
          return typeof i === 'string' ?
  

  <p>14</p>

  You are wrapping the subtotal in p tags: return "<p>" + subTotal + "</p>";. You don't need to do this so I removed them for the working example:
  http://live.datatables.net/mixegahu/1/edit

  You don't need to use p tags when returning the data in columns.render. But if you do then you will need to update the intVal function to remove them so only the numbers remain to be added.

  Kevin
• malhamoud Posts: 11Questions: 2Answers: 0

  January 2020

  Thank you very much Kevin you saved my project it works now the issue was in the

  <

  p> tag thank you again and have a nice day Sir.