File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
​
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
​
    
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
​
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
​
​
    
    <link href="https://cdn.datatables.net/autofill/2.3.4/css/autoFill.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/autofill/2.3.4/js/dataTables.autoFill.js"></script>
​
    <link href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.js"></script>
​
    <link href="https://nightly.datatables.net/rowreorder/css/rowReorder.dataTables.css?_=9e78fb9f95a9b67ea132905fd3877eea.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/rowreorder/js/dataTables.rowReorder.js?_=9e78fb9f95a9b67ea132905fd3877eea"></script>
​
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
                    <table id="example" class="table table-striped table-bordered" width="100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>id</th>
                                <th>Item Type</th>
                                <th>Qty</th>
                                <th>Supplier</th>
                                <th>Cat No.</th>
                                <th>Description</th>
                                <th>Cost Per Unit</th>
                              <th>Markup</th>
                            </tr>
                        </thead>
​
                        <tbody></tbody>
​
                    </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 dataSet = [{"DT_RowId":"row_62618","id":"62618","quote_id":"175299","quote_position":"1","type":"","quantity":"0.0000","brand":"","cat_number":"","description":"","cost_per_unit":"0.00","markup_perc":"0.00","note":"Chisholm TAFE Frankston Buildings A&B - Steinel Automation Package","isHeader":"yes","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62619","id":"62619","quote_id":"175299","quote_position":"2","type":"","quantity":"0.0000","brand":"","cat_number":"","description":"","cost_per_unit":"0.00","markup_perc":"0.00","note":"STEINEL 240V PRESENCE DETECTORS","isHeader":"yes","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62620","id":"62620","quote_id":"175299","quote_position":"3","type":"MD1","quantity":"38.0000","brand":"Steinel","cat_number":"","description":"M033453-MOTION DETECTOR IS 3360 ROUND COM1 CONCEALED [MD1]","cost_per_unit":"100.00","markup_perc":"0.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62621","id":"62621","quote_id":"175299","quote_position":"4","type":"MD2","quantity":"87.0000","brand":"Steinel","cat_number":"","description":"M032845-MOTION IS 360-1 DE WHITE [MD2]","cost_per_unit":"100.00","markup_perc":"0.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62622","id":"62622","quote_id":"175299","quote_position":"5","type":"MD3","quantity":"72.0000","brand":"Steinel","cat_number":"","description":"M052098-MOTION IS 2360 WHITE [MD3]","cost_per_unit":"100.00","markup_perc":"0.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62623","id":"62623","quote_id":"175299","quote_position":"6","type":"MD4","quantity":"16.0000","brand":"Steinel","cat_number":"","description":"M033682-MOTION DETECTOR HF 3360 ROUND COM1 CONCEALED [MD4]","cost_per_unit":"100.00","markup_perc":"0.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62624","id":"62624","quote_id":"175299","quote_position":"7","type":"MD5","quantity":"104.0000","brand":"Steinel","cat_number":"","description":"M002770-PRESENCE QUATTRO HD COM2 FAN CONTROL [MD5]","cost_per_unit":"100.00","markup_perc":"0.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62625","id":"62625","quote_id":"175299","quote_position":"8","type":"MD6","quantity":"30.0000","brand":"Steinel","cat_number":"","description":"M033446-MOTION DETECTOR IS 3360 ROUND COM1 SURFACE MOUNTED [MD6]","cost_per_unit":"100.00","markup_perc":"0.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62626","id":"62626","quote_id":"175299","quote_position":"10","type":"","quantity":"0.0000","brand":"","cat_number":"","description":"","cost_per_unit":"0.00","markup_perc":"0.00","note":"KNX Lighting Control System Quotation","isHeader":"yes","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62627","id":"62627","quote_id":"175299","quote_position":"11","type":"","quantity":"1.0000","brand":"Steinel","cat_number":"","description":"As per attachment","cost_per_unit":"100.00","markup_perc":"0.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""},{"DT_RowId":"row_62633","id":"62633","quote_id":"175299","quote_position":"9","type":"MD7","quantity":"4.0000","brand":"Steinel","cat_number":"","description":"M007935 - PRESENCE ULTRASONIC US360 [MD7]","cost_per_unit":"100.00","markup_perc":"5.00","note":"","isHeader":"no","pageBreakAfter":"no","rowHighlightColour":""}];
  
        let editor = new $.fn.dataTable.Editor( {
            data: dataSet,
            table: "#example",
            fields: [
                {
                    type:  "hidden",
                    name: "quote_id",
                    default: 12345
                },
                {
                    type:  "hidden",
                    name: "quote_position",
                    default: 0
                },
                {
                    type:  "hidden",
                    name: "note",
                    default: ""
                },
                {
                    type:  "hidden",
                    name: "rowHighlightColour",
                    default: ""
                },
                {
                    label: "Type",
                    name: "type"
                },
                {
                    label: "Quantity",
                    name: "quantity"
                },
                {
                    label: "Supplier",
                    name: "brand"
                },
                {
                    label: "Cat Number",
                    name: "cat_number"
                },
                {
                    label: "Description",
                    name: "description",
                    type:  "textarea"
                },
                {
                    label: "Cost Per Unit",
                    name: "cost_per_unit"
                },
                {
                    label: "Markup Percentage",
                    name: "markup_perc"
                }
            ]
        } );
​
​
        $('#example').on( 'click', 'tbody td', function (e) {
​
​
            if ( ($(this).index() !== 7 && $(this).index() !== 9 && $(this).index() !== 10) && $(this).attr('colspan') === undefined) {
                editor.inline( this );
            }
        } );
  
          var table = $('#example').DataTable({
            dom: "Bfrtip",
            autoFill: true,
            select: {
                style:    'os',
                selector: 'td:last-child',
                blurable: true
            },
                        rowReorder: {
                dataSrc: 'quote_position',
                editor: editor
            },
            buttons: [
                { extend: "create", editor: editor}
            ],
            "orderFixed": [ 1, 'asc' ],
            data: dataSet,
            rowId: 'id',
            "columns": [
                {"data": "id"},
                {"data": "quote_position"},
                {"data": "type"},
                {"data": "quantity"},
                {"data": "brand"},
                {"data": "cat_number"},
                {"data": "description"},
                {data: "cost_per_unit",
                    render: function ( data, type, row ) {
                        return '$'+ data;
                    }
                },
                              {data: "markup_perc",
                    render: function ( data, type, row ) {
                        return data + '%';
                    }
                }
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": true,
                    "searchable": false,
                    "orderable": false,
                },
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false,
                    "orderable": false,
                }
            ],
            "createdRow": function (row, data, dataIndex) {
​
                let isHeader = data.isHeader;
​
                if (isHeader === 'yes') {
                    $(row).html(sectionHeader(data));
                }
​
            }
            
     }); 
           
        table.on( 'order.dt search.dt', function () {
            table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();
​
        function sectionHeader(data) {
​
            return '<table cellpadding="5" cellspacing="0" border="0">' +
                '<tr>' +
              
                '<td>' + data.quote_position + '</td>' +
                '<td colspan="6" style="text-align:center;font-weight:bold;text-decoration: underline;">' + data.note + '</td>' +
                '</tr>' +
                '</table>';
        }
​
});
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers