jQuery DataTables 擴展是指在原有的 DataTables 基礎上進行功能拓展，并讓 DataTables 變得更加強大和可定制化。以下介紹幾個常用的擴展示例。

第一種擴展是增強搜索功能。在 DataTables 默認的搜索框中，只能進行簡單的模糊搜索，無法實現高級搜索。使用擴展之后，開發者可以自定義搜索方式、搜索條件、查詢范圍等。例如可以使用文本框、下拉框等輸入篩選條件，實現更加精準的搜索。

//自定義搜索框
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = parseInt($('#min-price').val(), 10);
var max = parseInt($('#max-price').val(), 10);
var price = parseFloat(data[5]) || 0; // use data for the age column
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && price<= max) ||
(min<= price && isNaN(max)) ||
(min<= price && price<= max)) {
return true;
}
return false;
}
);
//添加范圍輸入框
$('#min-price, #max-price').keyup(function() {
table.draw();
});

第二種擴展是改善交互體驗。DataTable 默認的分頁和排序功能使用起來并不是很用戶友好，需要點擊多次才能跳轉到指定頁碼或者排序。使用擴展之后，可以實現無刷新頁面跳轉、浮動表頭、排序動畫、數據導出等功能。

//添加翻頁快速跳轉到指定頁造
$.fn.dataTable.ext.feature.push({
"fnInit": function(oSettings) {
var nInput = document.createElement("input");
var nPage = oSettings.nTableWrapper.querySelector('.paginate_page');
nInput.type = "number";
nInput.className = "paginate_input";
nPage.appendChild(nInput);
$(nInput).keyup(function(e) {
if (e.keyCode == 13) {
var iNewStart = oSettings._iDisplayLength * (parseInt(this.value) - 1);
if (iNewStart >= 0) {
oSettings.fnDisplayStart(iNewStart);
$(this).blur();
}
}
});
return nInput;
},
"cFeature": "i",
"sFeature": "Quick Navigation Page"
})
//添加浮動表頭
$('table').floatThead({
scrollContainer: function($table) {
return $table.closest('.dataTables_scrollBody');
}
});

第三種擴展是優化數據交互。DataTable 默認采用的是 AJAX 異步加載數據，但是在面對大數據量時會導致加載耗時較長。使用擴展之后可以采用 Server-Side 模式，即服務器端進行分頁和查詢，只返回當前頁的數據，極大地提高了數據交互效率。

//Server-Side模式
$('#my-table').DataTable({
serverSide: true, //啟用服務端處理模式
pageLength: 10, //每頁展示 10 條數據
ajax: {
type: 'POST',
url: '/api/get_table_data', //請求的接口地址
data: function(d) {
//自定義參數
d.order = [{ column: 0, dir: 'desc' }];
d.extra_search = $('#extra-search').val();
}
},
columns: [
{data: 'id'},
{data: 'name'},
{data: 'age'},
{data: 'gender'},
{data: 'email'},
],
language: {
url: 'https://cdn.datatables.net/plug-ins/1.10.21/i18n/Chinese.json' //中文語言包
}
});

通過靈活使用 DataTables 擴展，我們能夠滿足業務需求，提高開發效率，提升用戶體驗，實現優秀的數據可視化解決方案。