PetaPocoPage View with a Table and DataTables Configuration

Index.cshtml

@{
    ViewBag.Title = "Server-Side Paging with PetaPoco DataTables";
}

<table id="customers" class="table table-striped table-condensed">
    <thead>
        <tr>
            <th style='width: 4%'>Id</th>
            <th>Last</th>
            <th>First</th>
            <th style='width: 30%'>Street</th>
            <th style='width: 15%'>City</th>
            <th style='width: 4%'>State</th>
            <th>Zip</th>
            <th>Phone</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script type="text/javascript">
    (function ($) {
        $.extend($.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        });
        
        $("#customers").dataTable({
            "bServerSide": true,
            "sAjaxSource": '@Url.Action("CustomerPage")',
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "aoColumns": [
                        { "sName": "Id", "sType": 'numeric' },
                        { "sName": "Last" },
                        { "sName": "First" },
                        { "sName": "Street" },
                        { "sName": "City" },
                        { "sName": "State" },
                        { "sName": "Zip" },
                        { "sName": "Phone" },
                        { "sName": "Email" }
                    ]
        }).fnSetFilteringDelay(500);
        
    })(jQuery);
</script>