JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Companies</h2>
<div style="width:90%; margin:10px auto">
<table class="table table-striped table-responsive" id="tblCompanies">
<thead>
<tr>
<th>Company - Division</th>
<th>Line 1</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
CSS
public JsonResult LoadCompanies()
{
using (AMS_ProductionEntities dc = new AMS_ProductionEntities())
{
//This works when I only take first 5000 records
var ctx = dc.vwDivisionSearches.OrderBy(a => a.FullName).ToList().Take(10000);
return Json(new { data = ctx }, JsonRequestBehavior.AllowGet);
}
}
}
JavaScript
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.js"></script>
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>
<script>
$(document).ready(function () {
$('#tblCompanies').dataTable({
"aLengthMenu": [[50, 100, 250, -1], [50, 100, 250, "All"]],
"scrollY": "500px",
buttons: [
{
extend: 'excel',
text: 'Export to Excel',
exportOptions: {
columns: [0,1, 2, 3, 4]
}
}
],
dom: 'Bfrtip',
"ajax": {
"url": "/Search/LoadCompanies",
...