DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

<html>

<head>
	


	


<title>ROC Staging Data</title>
</head>

<body>

	<form action="updateStaging.do" method="post" id="rocStagingForm" name="rocStagingForm">

        <table id="staged" class="display" style="width:100%">
            <caption><h2></h2></caption>
            <thead>
            <tr>
				
                <th>SU_ID</th>
                <th>Field Disposition</th>
				<th>Error Message</th>
                <th>Comment</th>			

            </tr>
            </thead>
            <tbody>
            <c:forEach var="data" items="${dataList}">
                <tr>					
                    <td><input type="text" id="su_id" name="su_id" value="${data.su_id}" /></td>
                    <td><input type="text" id="field_disp" name="field_disp" value="${data.field_disp}" /></td>                   
					<td><input type="text" id="error_desc" name="error_desc" value="${data.error_desc}" /></td>			
					<td><input type="textarea" style="width: 200%" styleClass="wrap" white-space: "normal" id="comment" name="comment" value="${data.comment}"/></td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        </form>
     </body>   
</html>

JavaScript

var stageTable;
	stageTable = $jq(document).ready(function () {
	
	    $jq('#staged').DataTable(
    			{
					

					
        			scrollY:'65vh',
        			"scrollCollapse": true,
					scrollX: true,
					scroller: true,
        			pageLength: 50,		
					fixedColumns: true,
					autoWidth: false,
					dom: 'Bl<"toolbar">rtip',
					search: false,
					responsive: true,
					"bSort": false, //true will show sort icons			
			columnDefs: [
			
			{ className: "dt-center", targets: [ 0, 1, 2, 3 ] },
            {  width: '200%', targets: 3 }

        ],	
		        select: {
            style:    'os',
            selector: 'td:first-child'
        },
					buttons: [						
									            {
			                text: 'Upload ROC File',
			                action: function (e, stageTable, node, config) {
			                	setupRocUpload();	
							}
			            },
            			
			            {
			                text: 'Validate',
			                action: function (e, dt, node, config) {

			                	validateStaging(dt); 
			                }
			            },
  						
						{
						text: 'Remove and Export Selected to CSV',
						 action: function(e, dt, node, config){
							 
							 exportErrors(dt);					 
						 }
						 },	
	
						 {
			                text: 'Submit to Database',
			                action: function (e, dt, node, config) {
								
								submit(dt);
			                }
			            },
			            {
			                text: 'Cancel',
			                action: function (e, dt, node, config) {
			                	clearStaging();
								removeAll(dt);
			                },
							
			            }						
			        ]			
        	}  
	    );	
	$jq('div.toolbar').html('<b><h1 align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Please completely clear the table before exiting.&nbsp;</h1></b>');
	});