DataTablesColumnWidth

Test Datatables with a column width and a checkbox select column

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<td><input type="checkbox" checked="checked" class="dt_checked" name="ignSubDependInd"></td>	This is a test of datatatables. It uses jquery. An additional plug in is required for fixed columns<br/><br/>
	
		<table id="example" class="display cell-border" cellspacing="0" width="100%">
			<thead>
				<tr>
                    <th>select</th>
					<th>First name</th>
					<th>Last name</th>
					<th>Position</th>
					<th>Office</th>
					<th>Age</th>
					<th>Start date</th>
					<th>Salary</th>
					<th>Extn.</th>
					<th>E-mail</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td><input type="checkbox" name="rowselect[]" value="1"/></td>
					<td>Tiger</td>
					<td>Nixon</td>
					<td>Programmer</td>
					<td>Alburque</td>
					<td class="AlignRight">1</td>
					<td>2011/04/25</td>
					<td>$320,800</td>
					<td>8422</td>
					<td>[email protected]</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="rowselect[]" value="1"/></td>
					<td>Steve</td>
					<td>Smith</td>
					<td>Programmer</td>
					<td>Bourne</td>
					<td class="AlignRight">2</td>
					<td>2011/07/25</td>
					<td>$170,750</td>
					<td>8422</td>
					<td>[email protected]</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="rowselect[]" value="1"/></td>
					<td>Brian</td>
					<td>Johnson</td>
					<td>Programmer</td>
					<td>AnyTown</td>
					<td class="AlignRight">10</td>
					<td>2011/07/25</td>
					<td>$170,750</td>
					<td>8422</td>
					<td>[email protected]</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="rowselect[]" value="1"/></td>
					<td>Ashton</td>
					<td>Cox</td>
					<td>Junior Technical Author</td>
					<td>San Francisco</td>
					<td...

CSS

th, td { white-space: nowrap; }
	    div.dataTables_wrapper {
	        width: 800px;
	        margin: 0 auto;		/* centers table. remove for left justified */
	    }
	    
	    /* this changes the row height */
		.dataTables_wrapper tbody tr {
		    height: 30px;
		    min-height: 30px;
		    max-height: 30px;
		}

		/* reduce the padding. the default is 10 on the sides and 8 on the top */
		.dataTables_wrapper td {
			padding: 5px !important;
		}
		

		/* set same font size for everything */
		.dataTables_wrapper {
		     font-family: Times New Roman, Arial, Sans-Serif !important;
			 font-size: 16px; 
		}

	    /* changing a cell to center, right aligmment */
	    .AlignCenter {text-align:center;}
	    .AlignRight {text-align:right;}

JavaScript

$(document).ready(function() {
			    var table = $('#example').DataTable( 
			    {
			        scrollY:        "300px",
			        scrollX:        true,
			        scrollCollapse: true,
			        paging:         false,
					"columnDefs": [ { "orderDataType": "dom-checkbox", "targets": [ 1 ] } ]
				} 
		    );
		} );

$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col ) {
        alert('xxx');
	    return this.api().column( col, { order : 'index' } ).nodes().map( function ( td, i ) {
	        return $('input', td).prop('checked') ? '1' : '0';
	    } );
	};