How to create a button to get the total number of each product having the same id in a data table jquery?

Question

0.00/5 (No votes)

See more:

MY HTML CODE

HTML

<html>
<body>
		<div class="container">
		<button value="Total" class="btn btn-primary" id="totalbtn">total of products</button>
			<table id="tabledata" class="display datatble table-hover" cellpadding="0" cellspacing="0" border="0" width="100%">
				<thead id="tablehead">

				    <tr id="trr" class="dropdown active">
				        <th id="first"></th>
				        <th id="second"></th>
				        <th id="third"></th>
				        <th id="fourth"></th>
        				<th id="fivth"></th>
    				</tr>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Stock</th>
						<th>Expiry Date</th>
						<th>Warehouse</th>
					</tr>
				</thead>
				<tbody><td></td></tbody>
				 <tfoot>
             <tr></tr> 
        </tfoot>
			</table>
		</div>
	</body>
</html>

my script</big>

JavaScript

$(document).ready(function() {
   var mytable= $('#tabledata').DataTable( {
        "ajax": {
            "url": "http://localhost/index.php",
            "dataSrc": ""
        },
        "columns": [
            { "data": "Id" },
            { "data": "productname" },
            { "data": "stock" },
            { "data": "expiry" },
            { "data": "warehouse" }
        ],

            initComplete: function () {
            this.api().columns([4]).every( function () {
                 var column = this; 
                 var selectwarehouse = $('<select><option value=""/></select>')
                      .appendTo( $('#tabledata .dropdown #fivth ').empty() )
                      .on( 'change', function () {
                           var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                           );
                      column
                           .search( val ? '^'+val+'$' : '', true, false )
                           .draw();
                      } );
                 column.data().unique().sort().each( function ( d, j ) {
                      selectwarehouse.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
            } ); // this.api function
            this.api().columns([3]).every( function () {
                 var column = this; 
                 var selectexp = $('<select><option value=""/></select>')
                      .appendTo( $('#tabledata .dropdown #fourth ').empty() )
                      .on( 'change', function () {
                           var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                           );
                      column
                           .search( val ? '^'+val+'$' : '', true, false )
                           .draw();
                      } );
                 column.data().unique().sort().each( function ( d, j ) {
                      selectexp.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
            } );//this.api func finish

            this.api().columns([2]).every( function () {
                 var column = this; 
                 var selectstock = $('<select><option value=""/></select>')
                      .appendTo( $('#tabledata .dropdown #third ').empty() )
                      .on( 'change', function () {
                           var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                           );
                      column
                           .search( val ? '^'+val+'$' : '', true, false )
                           .draw();
                      } );
                 column.data().unique().sort().each( function ( d, j ) {
                      selectstock.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
            } ); //this.api func finish

            this.api().columns([1]).every( function () {
                 var column = this; 
                 var selectname = $('<select><option value=""/></select>')
                      .appendTo( $('#tabledata .dropdown #second ').empty() )
                      .on( 'change', function () {
                           var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                           );
                      column
                           .search( val ? '^'+val+'$' : '', true, false )

                           .draw();
                      } );
                 column.data().unique().sort().each( function ( d, j ) {
                      selectname.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
            } ); //this.api func finish


            this.api().columns([0]).every( function () {
                 var column = this; 
                 var selectid = $('<select><option value=""/></select>')
                      .appendTo( $('#tabledata .dropdown #first ').empty() )
                      .on( 'change', function () {
                           var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                           );
                      column
                           .search( val ? '^'+val+'$' : '', true, false )
                           .draw();
                      } );
                        column.data().unique().sort().each( function ( d, j ) {
                        selectid.append( '<option value="'+d+'">'+d+'</option>' )
                 } );
            } ); //this.api func finish


        }//initComplete function 
    });//datatable closed 

                $('totalbtn').click(mytable.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                    var d = this.data();
                    var i = 0;
                    var h= columns([0]).row( i ).data();
                    var stockdata= columns([2]).data();
                    if ( h == h+1 ) {
                        stockdata.sum();
                    }
                    } ));
                // Draw once all updates are done
                mytable.draw();
}); //document

What I have tried:

i tried the click function which is wrote in the end of the code, but it didnt work. please i want to get the total sum of the products of the same id when i press the total button above the datatable.

Posted 23-Sep-18 21:10pm

Member 13995210

Updated 24-Sep-18 2:31am

Add a Solution

Comments

ZurdoDev 24-Sep-18 7:48am

You posted a lot of code. Just post the relevant code and ask a specific question. Show us where you are stuck.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

*dan!sh* · Answer 1 · 2018-09-24T02:32:00

Your posted code sample confused me so I created a simpler version myself. This will give some idea on how to proceed. Here is a JSFiddle of it.[^]

If you have a table with two columns, like this:

HTML

<html>

  <body>
    <div class="container">
      <table id="tabledata" class="display datatble table-hover" cellpadding="0" cellspacing="0" border="0" width="100%">
        <thead id="tablehead">
          <tr>
            <th>ID</th>
            <th>Count</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>10</td>
          </tr>
          <tr>
            <td>1</td>
            <td>15</td>
          </tr>
          <tr>
            <td>1</td>
            <td>20</td>
          </tr>
          <tr>
            <td>2</td>
            <td>10</td>
          </tr>
        </tbody>
        <tfoot>
          <tr></tr>
        </tfoot>
      </table>
    </div>
    <p id="total">

    </p>
  </body>

</html>

Then you can get the total using this jQuery code: