在使用DataTables插件时,如果搜索选项和分页不显示在MVC视图中,可能是由于以下几个原因:
<head>
标签中添加以下代码:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script><script>
标签中添加以下代码:
$(document).ready(function() { $('#yourTableId').DataTable(); });
其中#yourTableId
是你的表格的ID。以下是一个完整的示例,展示了如何在MVC视图中使用DataTables:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
</head>
<body>
<table id="yourTableId" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<!-- 其他列 -->
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<!-- 其他数据 -->
</tr>
<!-- 其他行 -->
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yourTableId').DataTable();
});
</script>
</body>
</html>
领取专属 10元无门槛券
手把手带您无忧上云