我正在创建一个大量使用DataTables的系统，我也想添加对YADCF的支持，因为它太棒了。
我已经设置了我的网站，以便我的布局页面上的脚本帮助启动DataTable，以触发发现特定类。因此，脚本对表格知之甚少，因为它们在站点内变化多样且不同，下面显示了一个示例。
这是表格。
<table class="table table-striped table-bordered table-hover dataTable-example-noorder">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.CaseName)
</th>
<th>
@Html.DisplayNameFor(model => model.NotifiedDate)
</th>
<th>
@Html.DisplayNameFor(model => model.LossRef)
</th>
<th class="ddl">
@Html.DisplayNameFor(model => model.SpecificBond.EnablingBond.UnderwritingPeriod)
</th>
<th class="ddl">
@Html.DisplayNameFor(model => model.PractitionerId)
</th>
<th class="ddl">
@Html.DisplayNameFor(model => model.SuccessorPractitionerId)
</th>
<th class="ddl">
@Html.DisplayNameFor(model => model.Status)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@cHelpers.Link(item)
</td>
<td>
@Html.DisplayFor(modelItem => item.NotifiedDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.LossRef)
</td>
<td>
@if(item.SpecificBond != null)
{
if(item.SpecificBond.EnablingBond!= null)
{
@cHelpers.Link(item.SpecificBond.EnablingBond.UnderwritingPeriod)
}
}
</td>
<td>
@cHelpers.Link(item.Practitioner)
</td>
<td>
@cHelpers.Link(item.SuccessorPractitioner)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
</tr>
}
</tbody>
然后这是启动DataTable实例的脚本
function FormatDataTables() {
$('.dataTable-example, .dataTable-example-noorder').DataTable({
order: [],
pageLength: 25,
dom: '<"html5buttons"B>lTfgitp',
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel', title: 'Export' },
{ extend: 'pdf', title: 'Export' },
{
extend: 'print',
customize: function (win) {
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
],
"stateSave": true,
"stateDuration": 0,
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
var formatter = new Intl.NumberFormat('en-UK', {
style: 'currency',
currency: 'GBP',
minimumFractionDigits: 0,
});
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\£,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
//iterate through each column
api.columns().indexes().flatten().each(function (i) {
var column = api.column(i);
var drop = column.nodes()
//if the column is one which requested a ddl then add it
var h = column.header();
var s = $(h).attr("class");
if (s.includes('total-col')) {
// Total over all pages
total = api
.column( i )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( i, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
if (pageTotal != total) {
$(api.column(i).footer()).html(formatter.format(pageTotal) + '<br /> Total - ' + formatter.format(total) + '');
}
else {
$(api.column(i).footer()).html(formatter.format(pageTotal));
}
};
});
},
initComplete: function () {
var api = this.api();
//iterate through each column
api.columns().indexes().flatten().each(function (i) {
var column = api.column(i);
var drop = column.nodes()
//if the column is one which requested a ddl then add it
var h = column.header();
var s = $(h).attr("class");
if (s.includes('hidden-col')) {
column.visible(false);
}
if (s.includes('ddl')) {
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
//handle hyperlinks
var t = d.substring(d.indexOf('>') + 1, d.lastIndexOf('<'))
if (t == '') {
select.append('<option value="' + d + '">' + d + '</option>')
}
else {
select.append('<option value="' + t + '">' + t + '</option>')
}
});
}
});
}
});
}
这很好但是目前我手动使用column.each部分数据表api手动创建下拉列表来遍历列，在标题中查找类“ddl”。
我想做的是替换这部分;
if (s.includes('ddl')) {
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
//handle hyperlinks
var t = d.substring(d.indexOf('>') + 1, d.lastIndexOf('<'))
if (t == '') {
select.append('<option value="' + d + '">' + d + '</option>')
}
else {
select.append('<option value="' + t + '">' + t + '</option>')
}
});
}
使用YADCF，因为它增加了更多功能。但是，我正在努力找到声明我想要的列，并保持我目前正在享受的部署灵活性。
有意识到我可能没有描述我在这里有一个小提琴后我是什么http://jsfiddle.net/Syrowe/7tran0k5/
有没有办法可以匹配我当前的部署策略并部署YADCF？
关于如何正确实现这一目标的任何建议，或者对我为什么要做的建议都是对设计欢迎的嘲弄。
由于
SY