<div class="box box-warning"> <div class="box-header"> <h3 class="box-title">Agents</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"> <i class="fa fa-minus"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"> <i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> @if ($user->all_agents()->count()) <table class="table table-bordered table-striped table-hover" id="agents" style="width: 100%;"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Level</th> </tr> </thead> <tfoot> <tr> <th>Count {{ $user->all_agents()->count() }}</th> <th colspan="2"> </th> </tr> </tfoot> </table> @else <p>No Agents Active</p> @endif </div> </div> @section('page-scripts') @css('https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css') @css('https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css') @js('https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js') @js('https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js') <style> table.dataTable td { outline: none; } </style> <script type="text/javascript"> $(document).ready(function() { $('#agents').DataTable( { responsive: true, ajax: { url: "/api/r/agents" }, columns: [ { data: "user_id_url" }, { data: "surfirstname" }, { data: "level" } ], language: { emptyTable: "No Active Agents" }, order: [1, 'asc'] }); $('#agents tbody').on('click','tr', function () { $(this).toggleClass('selected'); }); }); </script> @append