jQuery DataTable在按鈕上設置標題點擊

在我看來，我有2個輸入字段，1個按鈕和1個表，其中我使用的是jQuery DataTables。jQuery DataTable在按鈕上設置標題點擊

我在我的數據表上使用了print functionality。

我想根據2個輸入字段的值設置打印頁面的標題，但它不起作用。

在頁面加載時，2個輸入字段將爲空白。這是按鈕進入的位置。如果該按鈕被點擊，那麼這兩個字段都會有一個值，我需要將這些值合併到標題中。

這裏是我的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基於按鈕單擊。我無法根據其他事件設置數據表的屬性。

有沒有辦法做到這一點？

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>

來源

2017-10-04 GTown-Coder

我添加了'startDate'和'endDate' HTML ..無需上傳表..這是一個基本的HTML表。 –

所以我在[documentation]（https://datatables.net/reference/api/buttons.exportInfo（））中讀到的是'title'選項是一個'buttons.exportInfo（）'類型。所以你可以把它變成一個函數並從中返回一個值。 –

正如我在我的評論中提到，該title選項buttons.exportInfo()類型。您可以評估任何東西到標題，並返回一個字符串：

... 
buttons: [ 
      { 
       extend: 'print', 
       title: function() { 
        return 'Title For Location here ' + $("#Start-Date").val() + ' - ' + $("#End-Date").val(); 
       } 
      } 
     ] 
...

JSFiddle

來源

2017-10-04 16:30:22

謝謝你的回答。這工作。我還有一個問題，但它與這個直接相關。我想如果我有這個部分，那麼另一部分會很容易，但顯然不是。我真的有3個輸入在我的形式..其中2個是你在上面看到的......另一個是'＃單日期 - TxtBox'。基本上，如果'＃Single-Date-TxtBox'有一個值，那麼在標題中使用該日期。如果不是，則使用'＃Start-Date'和'＃End-Date'中的日期。任何想法如何做到這一點？ –

Nvmd想通了。謝謝。 –

@ GTown-Coder對不起，我正在吃午餐。我很高興你明白了。 –

jQuery DataTable在按鈕上設置標題點擊

回答

相關問題