【问题标题】:How to use a link in TableTools instead of flash buttons如何在 TableTools 中使用链接而不是 Flash 按钮
【发布时间】:2012-05-10 16:02:48
【问题描述】:

我正在尝试找到一种方法来更改 TableTools 上的按钮。我想使用我自己的自定义链接而不是 Flash 按钮。有没有办法我可以做到这一点?任何好的资源都可以教我如何进行修改并且仍然能够使用按钮集合等功能。

【问题讨论】:

    标签: javascript jquery jquery-datatables tabletools


    【解决方案1】:

    According to the creator,获得 TableTools 导出功能的唯一方法是使用 Flash 按钮。

    你找到的其他线程应该说目前,不,这个 不是 TableTools 提供的选项。 Flash 选项用于 提供跨浏览器/平台的能力,将文件完全保存在 客户端 - 该选项在旧版浏览器中根本不可用 (IE6、IE7 等)不支持 data:// 协议和 本地文件系统交互选项。

    肯定有可能将此功能添加到 TableTools, 但恐怕我还没有机会这样做。它在 不过路线图。

    艾伦

    如果您有兴趣在服务器端创建导出文件,您可能需要考虑the download (GET) plug-in for TableTools。

    【讨论】:

      【解决方案2】:

      是的,可以覆盖现有按钮,例如 PDF/CSV 等,或者创建新的自定义按钮,这些按钮具有指向 URL 的链接以获取或发布数据。在这里,我展示了 2 个带有 get 方法的方法:

      有关获取和发布方法的更多信息:

      访问:Datatable tabletools GET/POST download method overrides

      使用代码生成的 pdf 是因为 tabletools 的 pdf 输出在表上重叠,该表的行按某些列数据分组。

      第一个覆盖PDF功能和

      第二次创建自定义按钮。

      1.覆盖 PDF 函数以从服务器代码中获取 pdf。

      /*Get Method table Tools - PDF - Overriding*/
      
          TableTools.BUTTONS.pdf = {
              "sAction": "text",
              "sTag": "default",
              "sFieldBoundary": "",
              "sFieldSeperator": "\t",
              "sNewLine": "<br>",
              "sToolTip": "",
              "sButtonClass": "DTTT_button_text",
              "sButtonClassHover": "DTTT_button_text_hover",
              //"sButtonText": "PDF",
              "mColumns": "all",
              "bHeader": true,
              "bFooter": true,
              "sDiv": "",
              "fnMouseover": null,
              "fnMouseout": null,
              "fnClick": function (nButton, oConfig) {
                  var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
                  var iframe = document.createElement('iframe');
                  iframe.style.height = "0px";
                  iframe.style.width = "0px";
                  //iframe.src = oConfig.sUrl + "?" + $.param(oParams);
                  iframe.src = oConfig.sUrl;//This is the URl you give in datatable Tabletools pdf override below
                  document.body.appendChild(iframe);
              },
              "fnSelect": null,
              "fnComplete": null,
              "fnInit": null
          };
      
          /**/
      
      
      /*Datatable initialisation*/
      $(document).ready(function () {
      
      oTable = $('#alternatecolor').dataTable({
                  "bJQueryUI": true,
                  "aLengthMenu": [
                  [10, 25, 50, 100, -1],
                  [10, 25, 50, 100, "All"]
                  ],
                  "sPaginationType": "full_numbers",
                  "aoColumns": [
                  null,
                  null,
                  null,
                  null,
                  null],
                  "bLengthChange": false, "bPaginate": false,
                  "sDom": '<"H"Tfr>t<"F"ip>',
                  //"sDom": 'T<"clear">lfrtip',
                  "oTableTools": {
                      "aButtons": [
                    "csv", "xls",
                    {
                     /*PDF Override*/
                    "sExtends": "pdf",
                    "sButtonText": "PDF",
                     //Custom url to fetch pdf report
                    "sUrl": " report/PDFReportUsers/us/1"
                }
                  ]
                  }
              })
              /*Row grouping - optional*/
                      .rowGrouping({ bExpandableGrouping: true,
                          bExpandSingleGroup: false,
                          iExpandGroupOffset: -1
                          //asExpandedGroups: [name]
                      });
      
              /**/
          });  
      });
      

      2。从服务器代码中获取 pdf 的自定义按钮。

              /*Get Method table Tools - Download custom button*/
      
              TableTools.BUTTONS.download= {
                  "sAction": "text",
                  "sTag": "default",
                  "sFieldBoundary": "",
                  "sFieldSeperator": "\t",
                  "sNewLine": "<br>",
                  "sToolTip": "",
                  "sButtonClass": "DTTT_button_text",
                  "sButtonClassHover": "DTTT_button_text_hover",
                  //"sButtonText": "PDF",
                  "mColumns": "all",
                  "bHeader": true,
                  "bFooter": true,
                  "sDiv": "",
                  "fnMouseover": null,
                  "fnMouseout": null,
                  "fnClick": function (nButton, oConfig) {
                      var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
                      var iframe = document.createElement('iframe');
                      iframe.style.height = "0px";
                      iframe.style.width = "0px";
                      //iframe.src = oConfig.sUrl + "?" + $.param(oParams);
                      iframe.src = oConfig.sUrl;
                      document.body.appendChild(iframe);
                  },
                  "fnSelect": null,
                  "fnComplete": null,
                  "fnInit": null
              };
      
              /**/
      $(document).ready(function () {
      
              oTable = $('#alternatecolor').dataTable({
                  "bJQueryUI": true,
                  "aLengthMenu": [
                  [10, 25, 50, 100, -1],
                  [10, 25, 50, 100, "All"]
                  ],
                  "sPaginationType": "full_numbers",
                  "aoColumns": [
                  null,
                  null,
                  null,
                  null,
                  null],
                  "bLengthChange": false, "bPaginate": false,
                  "sDom": '<"H"Tfr>t<"F"ip>',
                  //"sDom": 'T<"clear">lfrtip',
                  "oTableTools": {
                      "aButtons": [
                    "csv", "xls"
                               , {
                                    "sExtends": "download",
                                    "sButtonText": "Download PDF",
                                    "sUrl":     "admin/user/4/downloadfile"
                                }
                  ]
                  }
              })
              /*Row grouping - optional */
                      .rowGrouping({ bExpandableGrouping: true,
                          bExpandSingleGroup: false,
                          iExpandGroupOffset: -1
                          //asExpandedGroups: [name]
                      });
      
              /**/
          });  
      

      【讨论】:

      • 这段代码和他们在dataTable网站中的代码一样,好吧...一个帮助你在这里生成pdf文件的地方,看起来你正在创建一个相同的iframe
      • @Suganthan,我一直在使用将 pdf 文件作为流返回到用户浏览器的 url。指定 pdf 生成器的 url:"sUrl":"admin/user/4/downloadfile" DataTable 通过以下方式加载 url:iframe.src = oConfig.sUrl;
      猜你喜欢
      • 1970-01-01
      • 2018-09-26
      • 1970-01-01
      • 2011-05-23
      • 2013-08-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多