<div class="data-table-btns"><button class="btn btn-success icon"><i class="mdi mdi-plus"></i>افزودن</button><button class="btn btn-info icon"><i class="mdi mdi-file-upload"></i>آپلود فایل</button></div>
<div class="card data-table">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div>عنوان</div>
<div class="options">
<div class="btn-icon btn-filter"><i class="mdi mdi-filter"></i></div>
<div class="btn-icon btn-search"><i class="mdi mdi-magnify"></i></div><select><option>8</option><option>16</option><option>24</option></select></div>
</div>
<div class="search">
<form>
<div class="form-group"><i class="mdi mdi-magnify"></i><input class="form-control" type="email" aria-describedby="search" placeholder="جستجو . ." /></div>
</form>
</div>
<div class="filter">
<form class="row">
<div class="form-group col">
<div class="custom-control custom-radio"><input class="custom-control-input" id="customRadio4" type="radio" name="customRadio" /><label class="custom-control-label" for="customRadio4">پرداخت شده</label></div>
<div class="custom-control custom-radio"><input class="custom-control-input" id="customRadio3" type="radio" name="customRadio" /><label class="custom-control-label" for="customRadio3">پرداخت نشده</label></div>
</div>
<div class="form-group col">
<div class="custom-control custom-checkbox"><input class="custom-control-input" id="customCheck2" type="checkbox" /><label class="custom-control-label" for="customCheck2">منقضی شده</label></div>
</div>
</form>
</div>
</div>
<div class="card-tbody">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th class="sortable" scope="col">First</th>
<th class="sortable asc" scope="col">Last</th>
<th class="sortable desc" scope="col">Handle</th>
<th scope="col">Options</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>
<div class="btn-icon"><i class="mdi mdi-delete"></i></div>
<div class="btn-icon"><i class="mdi mdi-pencil"></i></div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>
<div class="btn-icon"><i class="mdi mdi-delete"></i></div>
<div class="btn-icon"><i class="mdi mdi-pencil"></i></div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>
<div class="btn-icon"><i class="mdi mdi-delete"></i></div>
<div class="btn-icon"><i class="mdi mdi-pencil"></i></div>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
<div class="col-md-6 col-sm-12">
<p class="pagination-data">نمایش 1 تا 3 از 12 رکورد</p>
</div>
</div>
</div>
</div>