jQuery DataTable设置标题按钮单击 [英] jQuery DataTable Set Title On Button Click
问题描述
在我看来,我有2个输入字段,1个按钮和1个表,我正在使用 jQuery DataTables 。
On my view, I have 2 input fields, 1 button and 1 table of which I am using jQuery DataTables.
我正在使用打印功能。
我试图根据2个输入字段的值设置打印页面的标题,但是它不起作用。
I am trying to set the title of the print page based off of the values of the 2 input fields, but it is not working.
在页面加载时,2个输入字段将为空白...这是按钮发挥作用的位置。如果单击该按钮,则这两个字段都将具有值,我需要将这些值合并到标题中。
On page load, the 2 input fields will be blank.. which is where the button comes into play. If that button is clicked then both of those fields will have a value and I need those values to be incorporated into the title.
这是我的jQuery:
Here is my jQuery:
var startDate = "";
var endDate = "";
$("#Search-Btn").click(function() {
startDate = $("#Start-Date").val();
endDate = $("#End-Date").val();
});
var firstTable = $("#Month-Table").DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
title: 'Title For ' + locationName + ' ' + startDate + ' - ' + endDate,
exportOptions: {
columns: ':not(:last-child)'
}
}],
"searching": false,
"paging": false
});
问题:
因为数据表是在页面加载时设置的。我无法将标题设置为包含 startDate
和 endDate
基于按钮单击。我无法根据其他事件设置数据表的属性。
Because the datatable is setup on page load.. I can't set the title to incorporate the startDate
and endDate
based on button click. I can't set properties of the datatable based on other events.
有没有办法做到这一点?
Is there a way to do this?
HTML
<div class="col-md-4 date-range">
<div class="input-group date datetimepicker">
@Html.TextBox("startDate", null, new { id = "Start-Date", @class = "form-control", @placeholder = "Start Date" })
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="col-md-1 date-range">
<p class="text-center">
<span class="fa fa-minus"></span>
</p>
</div>
<div class="col-md-4 date-range">
<div class="input-group date datetimepicker">
@Html.TextBox("endDate", null, new { id = "End-Date", @class = "form-control", @placeholder = "End Date" })
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
推荐答案
正如我在评论中所提到的, title
选项的类型为 buttons.exportInfo()
。您可以在标题中评估任何内容,并返回一个字符串:
As I mentioned in my comment, the title
option is of type buttons.exportInfo()
. You can evaluate anything into the title, and return a string:
...
buttons: [
{
extend: 'print',
title: function() {
return 'Title For Location here ' + $("#Start-Date").val() + ' - ' + $("#End-Date").val();
}
}
]
...
这篇关于jQuery DataTable设置标题按钮单击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!