jQuery DataTable是一个优秀的表格插件，可用于显示数据并提供排序、搜索和分页等功能。在使用过程中，有时我们需要将表格居中显示。本文将介绍如何使用CSS和jQuery来实现DataTable的居中显示。 第一步，我们需要给DataTable的容器添加样式，使之居中显示。HTML结构如下：

<div class="container">
<table id="mydatatable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</div>

现在我们可以添加CSS样式来使容器居中显示。

.container {
margin: 0 auto;
text-align: center;
}

现在我们的表格已经居中显示了，但是DataTable中的元素并没有居中显示，我们需要添加一些额外的代码来解决这个问题。我们可以使用DataTable的API来获取其元素并进行居中处理。

// 初始化DataTable，并获取其实例
var table = $('#mydatatable').DataTable();
// 获取DataTable中的搜索框并居中
var searchInput = $(table.table().container()).find('input[type="search"]');
searchInput.css({
'text-align': 'center',
'padding': '10px'
});
// 获取DataTable中的分页器并居中
var paginator = $(table.table().container()).find('.dataTables_paginate');
paginator.css('text-align', 'center');

以上代码将获取DataTable的搜索框和分页器，并设置其居中显示。 总结一下，要使DataTable居中显示，我们需要将其容器居中，然后通过API获取其元素来进行居中处理。通过这些简单的CSS和jQuery代码，我们可以方便地实现DataTable的居中显示。