JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<div class="table-responsive">
            <table id="SearchTable" class="table table-bordered table-striped table-hover table blue">
    <tr>
        <th></th>
        <th>Report Detail</th>
        <th>Form</th>
        <th>Attachments</th>
        <th>Result</th>
        <th> Report No.</th>
        <th>Report Date</th>
        <th>Form No.</th>
    </tr>
    <tr>
        <td class="reportManager">123</td>
        <td class="reportDetail">some</td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager"></td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager"></td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
    <tr>
        <td class="reportManager">123</td>
        <td class="reportDetail"></td>
        <td class="form">ghi</td>
        <td class="attachments">jkl</td>
        <td class="result">Success</td>
        <td class="reportNo">Rpt-001001110</td>
        <td class="Date">08-09-2012</td>
        <td class="formNo">A000146647</td>
    </tr>
</table>
        <div class="pagination-holder clearfix">
			<div id="light-pagination" class="pagination"></div>
	    </div>
        </div>

CSS

/**
* CSS themes for simplePagination.js
* Author: Flavius Matis - http://flaviusmatis.github.com/
* URL: https://github.com/flaviusmatis/simplePagination.js
*/

ul.simple-pagination {
	list-style: none;
}

.simple-pagination {
	display: block;
	overflow: hidden;
	padding: 0 5px 5px 0;
	margin: 0;
}

.simple-pagination ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.simple-pagination li {
	list-style: none;
	padding: 0;
	margin: 0;
	float: left;
}

/*------------------------------------*\
	Compact Theme Styles
\*------------------------------------*/

.compact-theme a, .compact-theme span {
	float: left;
	color: #333;
	font-size:14px;
	line-height:24px;
	font-weight: normal;
	text-align: center;
	border: 1px solid #AAA;
	border-left: none;
	min-width: 14px;
	padding: 0 7px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}

.compact-theme a:hover {
	text-decoration: none;
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */
	background:...

JavaScript

$(document).ready(function() {
    $('#example').DataTable();
} );