File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table class="table display" id="example">
          <thead>
              <tr>
                  <th>
                      Category
                  </th>
                  <th>
                      Name
                  </th>
                  <th>
                      Quantity
                  </th>
                  <th>
                      Price
                  </th>
                  <th>
                      Total
                  </th>
              </tr>
          </thead>
          <tfoot>
              <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
              </tr>
            <tr class="cus-footer">
                  <th></th>
                  <th class="text-input"></th>
                  <th class="text-input"></th>
                  <th class="text-input"></th>
                  <th class="text-input"></th>
              </tr>
          </tfoot>
         <tbody>
          <tr class="odd" id="row_1" role="row"><td class="sorting_1">B</td><td>P1</td><td class=" sum">42</td><td class=" sum">1</td><td class=" sum">42</td></tr><tr class="even" id="row_2" role="row"><td class="sorting_1">A</td><td>P2</td><td class=" sum">1</td><td class=" sum">2</td><td class=" sum">2</td></tr><tr class="odd" id="row_3" role="row"><td class="sorting_1">A</td><td>P3</td><td class=" sum">1</td><td class=" sum">3</td><td class=" sum">3</td></tr><tr class="even" id="row_4" role="row"><td class="sorting_1">A</td><td>P4</td><td class=" sum">1</td><td class=" sum">4</td><td class=" sum">4</td></tr><tr class="odd" id="row_5" role="row"><td class="sorting_1">A</td><td>P5</td><td class=" sum">1</td><td class=" sum">5</td><td class=" sum">5</td></tr><tr class="even" id="row_6" role="row"><td class="sorting_1">A</td><td>P6</td><td class=" sum">1</td><td class=" sum">6</td><td class=" sum">6</td></tr><tr class="odd" id="row_7" role="row"><td class="sorting_1">A</td><td>P7</td><td class=" sum">1</td><td class=" sum">7</td><td class=" sum">7</td></tr><tr class="even" id="row_8" role="row"><td class="sorting_1">A</td><td>P8</td><td class=" sum">1</td><td class=" sum">8</td><td class=" sum">8</td></tr><tr class="odd" id="row_9" role="row"><td class="sorting_1">A</td><td>P9</td><td class=" sum">1</td><td class=" sum">9</td><td class=" sum">9</td></tr><tr class="even" id="row_10" role="row"><td class="sorting_1">A</td><td>P10</td><td class=" sum">1</td><td class=" sum">10</td><td class=" sum">10</td></tr>
          <tr class="odd" id="row_11" role="row"><td class="sorting_1">B</td><td>P11</td><td class=" sum">1</td><td class=" sum">11</td><td class=" sum">11</td></tr><tr class="even" id="row_12" role="row"><td class="sorting_1">A</td><td>P12</td><td class=" sum">1</td><td class=" sum">12</td><td class=" sum">12</td></tr><tr class="odd" id="row_13" role="row"><td class="sorting_1">A</td><td>P13</td><td class=" sum">1</td><td class=" sum">13</td><td class=" sum">13</td></tr><tr class="even" id="row_14" role="row"><td class="sorting_1">A</td><td>P14</td><td class=" sum">1</td><td class=" sum">14</td><td class=" sum">14</td></tr><tr class="odd" id="row_15" role="row"><td class="sorting_1">A</td><td>P15</td><td class=" sum">1</td><td class=" sum">15</td><td class=" sum">15</td></tr><tr class="even" id="row_16" role="row"><td class="sorting_1">A</td><td>P16</td><td class=" sum">1</td><td class=" sum">16</td><td class=" sum">16</td></tr><tr class="odd" id="row_17" role="row"><td class="sorting_1">A</td><td>P17</td><td class=" sum">1</td><td class=" sum">17</td><td class=" sum">17</td></tr><tr class="even" id="row_18" role="row"><td class="sorting_1">A</td><td>P18</td><td class=" sum">1</td><td class=" sum">18</td><td class=" sum">18</td></tr><tr class="odd" id="row_19" role="row"><td class="sorting_1">A</td><td>P19</td><td class=" sum">1</td><td class=" sum">19</td><td class=" sum">19</td></tr><tr class="even" id="row_20" role="row"><td class="sorting_1">A</td><td>P20</td><td class=" sum">1</td><td class=" sum">20</td><td class=" sum">20</td></tr>         
          <tr class="odd" id="row_21" role="row"><td class="sorting_1">B</td><td>P21</td><td class=" sum">1</td><td class=" sum">21</td><td class=" sum">21</td></tr><tr class="even" id="row_22" role="row"><td class="sorting_1">A</td><td>P22</td><td class=" sum">1</td><td class=" sum">22</td><td class=" sum">22</td></tr><tr class="odd" id="row_23" role="row"><td class="sorting_1">A</td><td>P23</td><td class=" sum">1</td><td class=" sum">23</td><td class=" sum">23</td></tr><tr class="even" id="row_24" role="row"><td class="sorting_1">A</td><td>P24</td><td class=" sum">1</td><td class=" sum">24</td><td class=" sum">24</td></tr><tr class="odd" id="row_25" role="row"><td class="sorting_1">A</td><td>P25</td><td class=" sum">1</td><td class=" sum">25</td><td class=" sum">25</td></tr><tr class="even" id="row_26" role="row"><td class="sorting_1">A</td><td>P26</td><td class=" sum">1</td><td class=" sum">26</td><td class=" sum">26</td></tr><tr class="odd" id="row_27" role="row"><td class="sorting_1">A</td><td>P27</td><td class=" sum">1</td><td class=" sum">27</td><td class=" sum">27</td></tr><tr class="even" id="row_28" role="row"><td class="sorting_1">A</td><td>P28</td><td class=" sum">1</td><td class=" sum">28</td><td class=" sum">28</td></tr><tr class="odd" id="row_29" role="row"><td class="sorting_1">A</td><td>P29</td><td class=" sum">1</td><td class=" sum">29</td><td class=" sum">29</td></tr>
        </body>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
 $(document).ready(function() {
            var table = $('#example').DataTable({
                lengthMenu: [[10, 50, 100, 500, -1], [10, 50, 100, 500, "All"]],
                dom: 'lBfrtip',
                       colReorder: true,
                       stateSave: true,
                       buttons: [
                           'csv', 'excel'
                       ],
                columns: [
                    { data: "Category" },
                    { data: "Name",  className: "sum"  },
                    { data: "Quantity", className: "sum" },
                    { data: "Price", className: "sum" },
                    {
                        data: null,
                        className: "sum",
                        render: function(data, type, row) {
                            return data.Quantity * data.Price;
                        }
                    }
                ],
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api();
​
                    api.columns('.sum', { page: 'current' }).every(function () {
                        var sum = this
                            .data()
                            .reduce(function (a, b) {
                                var x = parseFloat(a) || 0;
                                var y = parseFloat(b) || 0;
                                return x + y;
                            }, 0);
                        console.log(sum); //alert(sum);
                        $(this.footer()).html(sum);
                    });
                }
              });
   
             // Setup - add a text input to each footer cell
   
            $('#example tfoot tr.cus-footer th.text-input').each( function () {
                        var title = $(this).text();
                        $(this).html( '<input type="text" placeholder="'+title+'" />' );
                        } );
             
                      // DataTable
                      var table = $('#example').DataTable();
             
                      // Apply the search
   $( '#example tfoot .text-input'  ).on( 'keyup', "input",function () {
       console.log(this.value, $(this).parent().index())
        table
            .column( $(this).parent().index() )
            .search( this.value )
            .draw();
    } );
                      
                    
                      table.column(0).every( function () {
                          
                          var column = this;
                          var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).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) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                          });
                      });
                      });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers