Add up custom fields in datatable

DataTables-Append-Fields

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 
    <table id="example-datatables">
            <thead>
                <tr>
                    <th class="cell-small text-center">ID</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
<script>
    $('#example-datatables').dataTable({
    		responsive: true,
    		dom: "<'row'<'col-sm-2'l><'col-sm-2'i><'col-sm-2'f><'col-sm-2'><'col-sm-4'p>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-2'l><'col-sm-2'i><'col-sm-2'f><'col-sm-2'><'col-sm-4'p>>",
    		"bProcessing": true,
    		"bServerSide": true,
    		"sAjaxSource": "xxxx.com/getdata/",
    		"columns": [
    				{ "data": "user_id" },
    		 ],
    		 "fnServerData": function ( sSource, aoData, fnCallback ) {
    		 var __date = $.trim($('#date').val());	  
    			aoData.push({name:"date",value:String(__date)});
    			$.getJSON( sSource, aoData, function (json) {
    				fnCallback(json)
    			} );
    		},
    		"aaSorting": [[ 0, "asc" ]],
    		"pageLength": 100,
    		"columnDefs": [
    			{ "orderable": false, "targets": [-1] }
    		],
    });

    var _dateRow = '<input type="date" name="date" id="date">';
    $('.dataTables_length').prepend(_dateRow);
</script>