问题描述
我正在尝试向 html 表格添加高级搜索。 到目前为止，使用 Datatable.js 我设法实现了常规搜索，但是在我使用的主题中，我无法直接从我的 html 中读取信息。 在我在高级搜索主题中使用的 Js 中，表格的内容直接从外部 PHP 文件加载，而不是所需表格实际所在的 html。
如何从我的 HTML 表加载内容而不是从 url 加载 js（Ajax 行）？
JS
"use strict";
var KTDatatablesSearchOptionsAdvancedSearch = function() {
$.fn.dataTable.Api.register('column().title()',function() {
return $(this.header()).text().trim();
});
var initTable1 = function() {
// begin first table
var table = $('#kt_datatable').DataTable({
responsive: true,// Pagination settings
dom: `<'row'<'col-sm-12'tr>>
<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,// read more: https://datatables.net/examples/basic_init/dom.html
lengthMenu: [5,10,25,50],pageLength: 10,language: {
'lengthMenu': 'display _MENU_',},searchDelay: 500,processing: true,serverSide: true,ajax: {
url: HOST_URL + '/api//datatables/demos/server.PHP',type: 'POST',data: {
// parameters for custom backend script demo
columnsDef: [
'RecordID','OrderID','Country','ShipCity','CompanyAgent','ShipDate','Status','Type','Actions',],columns: [
{data: 'RecordID'},{data: 'OrderID'},{data: 'Country'},{data: 'ShipCity'},{data: 'CompanyAgent'},{data: 'ShipDate'},{data: 'Status'},{data: 'Type'},{data: 'Actions',responsivePriority: -1},initComplete: function() {
this.api().columns().every(function() {
var column = this;
switch (column.title()) {
case 'Country':
column.data().unique().sort().each(function(d,j) {
$('.datatable-input[data-col-index="2"]').append('<option value="' + d + '">' + d + '</option>');
});
break;
case 'Status':
var status = {
1: {'title': 'Pending','class': 'label-light-primary'},2: {'title': 'Delivered','class': ' label-light-danger'},3: {'title': 'Canceled','class': ' label-light-primary'},4: {'title': 'Success','class': ' label-light-success'},5: {'title': 'Info','class': ' label-light-info'},6: {'title': 'Danger',7: {'title': 'Warning','class': ' label-light-warning'},};
column.data().unique().sort().each(function(d,j) {
$('.datatable-input[data-col-index="6"]').append('<option value="' + d + '">' + status[d].title + '</option>');
});
break;
case 'Type':
var status = {
1: {'title': 'Online','state': 'danger'},2: {'title': 'Retail','state': 'primary'},3: {'title': 'Direct','state': 'success'},j) {
$('.datatable-input[data-col-index="7"]').append('<option value="' + d + '">' + status[d].title + '</option>');
});
break;
}
});
},columnDefs: [
{
targets: -1,title: 'Actions',orderable: false,render: function(data,type,full,Meta) {
return '\
<div class="dropdown dropdown-inline">\
<a href="javascript:;" class="btn btn-sm btn-clean btn-icon" data-toggle="dropdown">\
<i class="la la-cog"></i>\
</a>\
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">\
<ul class="nav nav-hoverable flex-column">\
<li class="nav-item"><a class="nav-link" href="#"><i class="nav-icon la la-edit"></i><span class="nav-text">Edit Details</span></a></li>\
<li class="nav-item"><a class="nav-link" href="#"><i class="nav-icon la la-leaf"></i><span class="nav-text">Update Status</span></a></li>\
<li class="nav-item"><a class="nav-link" href="#"><i class="nav-icon la la-print"></i><span class="nav-text">Print</span></a></li>\
</ul>\
</div>\
</div>\
<a href="javascript:;" class="btn btn-sm btn-clean btn-icon" title="Edit details">\
<i class="la la-edit"></i>\
</a>\
<a href="javascript:;" class="btn btn-sm btn-clean btn-icon" title="Delete">\
<i class="la la-trash"></i>\
</a>\
';
},{
targets: 6,Meta) {
var status = {
1: {'title': 'Pending',};
if (typeof status[data] === 'undefined') {
return data;
}
return '<span class="label label-lg font-weight-bold' + status[data].class + ' label-inline">' + status[data].title + '</span>';
},{
targets: 7,Meta) {
var status = {
1: {'title': 'Online',};
if (typeof status[data] === 'undefined') {
return data;
}
return '<span class="label label-' + status[data].state + ' label-dot mr-2"></span>' +
'<span class="font-weight-bold text-' + status[data].state + '">' + status[data].title + '</span>';
},});
var filter = function() {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
table.column($(this).data('col-index')).search(val ? val : '',false,false).draw();
};
var asdasd = function(value,index) {
var val = $.fn.dataTable.util.escapeRegex(value);
table.column(index).search(val ? val : '',true);
};
$('#kt_search').on('click',function(e) {
e.preventDefault();
var params = {};
$('.datatable-input').each(function() {
var i = $(this).data('col-index');
if (params[i]) {
params[i] += '|' + $(this).val();
}
else {
params[i] = $(this).val();
}
});
$.each(params,function(i,val) {
// apply search params to datatable
table.column(i).search(val ? val : '',false);
});
table.table().draw();
});
$('#kt_reset').on('click',function(e) {
e.preventDefault();
$('.datatable-input').each(function() {
$(this).val('');
table.column($(this).data('col-index')).search('',false);
});
table.table().draw();
});
$('#kt_datepicker').datepicker({
todayHighlight: true,templates: {
leftArrow: '<i class="la la-angle-left"></i>',rightArrow: '<i class="la la-angle-right"></i>',});
};
return {
//main function to initiate the module
init: function() {
initTable1();
},};
}();
jQuery(document).ready(function() {
KTDatatablesSearchOptionsAdvancedSearch.init();
});
HTML
<table class="table table-bordered table-hover table-checkable" id="kt_datatable">
<thead>
<tr>
<th>Record ID</th>
<th>Order ID</th>
<th>Country</th>
<th>Ship City</th>
<th>Company Agent</th>
<th>Ship Date</th>
<th>Status</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th>2</th>
<th>sdfdsfs</th>
<th>sdf</th>
<th>sdfdsfsf</th>
<th>sdfsfsfsdfds</th>
<th>test</th>
<th>testtt</th>
<th>test</th>
<th>Actions</th>
</tr>
<tr>
<th>33</th>
<th>sdfdsfs</th>
<th>sdf</th>
<th>sdfdsfsf</th>
<th>sdfsfsfsdfds</th>
<th>test</th>
<th>testtt</th>
<th>test</th>
<th>testtttt</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>Record ID</th>
<th>Order ID</th>
<th>Country</th>
<th>Ship City</th>
<th>Company Agent</th>
<th>Ship Date</th>
<th>Status</th>
<th>Type</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
解决方法
检查文件：html-table.js 来自：demo(n)\dist\assets\js\pages\crud\ktdatatable\base\html-table.js
有一个完整的例子来说明如何配置 KtDatatable。我认为您是从远程数据而不是 HTML 表中添加选项。 另一种方式是Local数据，但是数据在一个Js上作为一个对象