Multi-Page Datatables Tracking

by kodemonki

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form method="post" id="my_order" action="add_order.cfm">    
              
	                <table id="partsList" class="table table-striped table-bordered table-hover" width="100%">
	                    <thead>
	                        <tr>
	                            <th rowspan="2">Part No.</th>
	                            <th>Cost</th>
	                            <th>Qty</th>
                                <th rowspan="2">Pkg Qty</th>
	                            <th rowspan="2">Application UIO</th>
	                        </tr>
	                        <tr>
	                         	   <th class="text-right">Total:</th>
	                            <th><span id="order_total" class="text-right"></span><button style="float:right;"  type="submit">Go to Checkout</button></th>
	                        </tr>
	                    </thead>
	                    <tfoot>
	                        <tr>
	                            <th>Part No.</th>
	                            <th>Cost</th>
	                            <th>Qty</th>
                                <th>Pkg Qty</th>
	                            <th>Application UIO</th>
	                        </tr>
	                    </tfoot>
	                    <tbody>
	                        
	                            <tr>
	                                <td>A</td>
	                                <td align="right"><span class="part_cost text-right" id="c_L14006"...

CSS

.navbar-brand {
			  padding: 0px;
			}
			.navbar-brand>img {
			  	height: 100%;
			  	padding: 0px;
			  	width: auto;
			}
			.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    			background-color: #EC9533;
    			text-decoration: underline;
			}
			h1 {
    			margin-top: 0;
			}
#partsList th{
        vertical-align: top;
    }
    input[type=number]{
    	text-align: right;
    }
    #partsList_length{
        float:left;
        padding-right: 20px;
    }
    .popover{
        max-width: 100%; /* Max Width of the popover (depending on the container!) */
    }

JavaScript

$.fn.dataTable.ext.search.push(
        // function( settings, data, dataIndex ) {
        //     var min = 0;
        //     var max = 10000000000000;
        //     var range = document.getElementById('uoi_range').value;
        //     var uoi = parseFloat( data[6] ) || 0; // use data for the age column
     
        //     if(range == 1){
        //         min = 0;
        //         max = 500;
        //     }else if(range == 2){
        //         min = 501;
        //         max = 1000;
        //     }else if(range == 3){
        //         min = 1001;
        //         max = 1500;
        //     }else if(range == 4){
        //         min = 1501;
        //     }

        //     if ( ( isNaN( min ) && isNaN( max ) ) ||
        //          ( isNaN( min ) && uoi <= max ) ||
        //          ( min <= uoi   && isNaN( max ) ) ||
        //          ( min <= uoi   && uoi <= max ) )
        //     {
        //         return true;
        //     }
        //     return false;
        // }
    );

    /* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val();
    } );
}
 
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val() * 1;
    } );
}

    $(document).ready(function() {
        var table = $('#partsList').DataTable( {
        	"columns": [
        		null,
        		null,
        		null,
        		null,
        		{"orderDataType": "numeric"},
                {"orderDataType": "dom-text-numeric"},
        		{"orderDataType": "numeric"}
        	],
        	"order": [ 6, "desc" ],
        	initComplete: function ()...