jQuery Datatable中的Ajax自定义按钮传递参数

时间:2016-09-23 12:46:27

标签: jquery ajax datatables

JS

我是Ajax的新手。我有一个用于RoR应用程序的jQuery dataTable。我必须将参数传递给按钮,以便我可以选择单击按钮时要执行的操作。

var invoiceTable = $('#invoice_list_index').DataTable( {
    "scrollY": "300px",
    "bScrollCollapse": true,
    processing: true,
    serverSide: true,
    dom: 'Bfrtip',
      buttons: [
          {
              extend: 'alert',
              text: 'My button 1',
          },
          {
              extend: 'alert',
              text: 'My button 2'
          },
          {
              extend: 'alert',
              text: 'My button 3'
          }
      ],
    "ajax": {
      type: "POST",
      url: '/invoices/invoice_index_page',
      
    }
  });
<a class="dt-button buttons-alert" tabindex="0" aria-controls="invoice_list_index" href="#"><span>My button 1</span></a>

问题是我不知道如何将参数传递给ajax自定义按钮。

2 个答案:

答案 0 :(得分:0)

请确保您已包含jQuery。

答案 1 :(得分:0)

演示: https://jsfiddle.net/Prakash_Thete/7v7xLaz2/1/

首先,您需要为DataTable buttons创建操作。

请创建如下按钮。

"dom": 'Bfrtip',
   "buttons": [
          {
              text: 'My button 1',
              action: function () {
                console.log("inside button 1");
              }
          },
          {   
              text: 'My button 2',
              action: function () {
                console.log("inside button 2");
              }
          },
          {
              text: 'My button 3',
              action: function () {
                console.log("inside button 3");
              }
          }
      ]

所以当你点击任何一个按钮时,相应的信息就会打印出来。

所以现在将参数传递给这些按钮的第二件事就像任何其他普通按钮一样,只需使用相应按钮动作中的变量。