使用jquery数据表

Question

我正在尝试启用过滤到使用Jquery Datatables库从表数据生成的excel顶行/头文件。

我已经按照本教程https://datatables.net/extensions/buttons/examples/initialisation/export.html进行了操作，效果很好，生成的excel文件如下所示。

正如您在该图片中看到的那样，顶行没有过滤器。我知道我们可以在打开后在excel文件中启用过滤器。但我正在尝试在生成excel文件时执行此操作。

因此，导出的excel文件应如下所示。

您可以使用过滤器查看红色圆圈中的高光。

所以只是想知道它是否可能，任何有关如何实现这一点的建议都将受到高度赞赏。

谢谢。

Answer 1

您可以通过更改文件buttons.html5.js中的Excel文件架构来自动启用过滤器。

在buttons.html5.js文件中，您可以找到以下代码。

// Excel - Pre-defined strings to build a minimal XLSX file
var excelStrings = {
    "_rels/.rels": '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">\
    <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>\
</Relationships>',

    "xl/_rels/workbook.xml.rels": '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">\
    <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/>\
</Relationships>',

    "[Content_Types].xml": '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\
<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">\
    <Default Extension="xml" ContentType="application/xml"/>\
    <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>\
    <Default Extension="jpeg" ContentType="image/jpeg"/>\
    <Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>\
    <Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>\
</Types>',

    "xl/workbook.xml": '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\
<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">\
    <fileVersion appName="xl" lastEdited="5" lowestEdited="5" rupBuild="24816"/>\
    <workbookPr showInkAnnotation="0" autoCompressPictures="0"/>\
    <bookViews>\
        <workbookView xWindow="0" yWindow="0" windowWidth="25600" windowHeight="19020" tabRatio="500"/>\
    </bookViews>\
    <sheets>\
        <sheet name="__SHEET_NAME__" sheetId="1" r:id="rId1"/>\
    </sheets>\
</workbook>',

    "xl/worksheets/sheet1.xml": '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\
<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac">\
    <sheetData>\
        __DATA__\
    </sheetData>\
</worksheet>'
};

您必须更新上述对象。

excelStrings["xl/worksheets/sheet1.xml"] = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac"><sheetData>__DATA__</sheetData><autoFilter ref="A1:g1"/></worksheet>';

唯一的区别是我们附加了 <autoFilter ref="A1:g1"/> 。

请注意，ref =＆＃34; A1：G1＆＃34;是要启用此自动过滤器的列。

这就是我解决启用自动过滤器问题的方法。

Answer 2

您还可以从现有的“按钮”属性访问数据表。

buttons: [ {
        extend: 'excelHtml5',
        autoFilter: true,
        sheetName: 'Sheet Name'
    } ]

• https://datatables.net/extensions/buttons/examples/html5/excelAutoFilter.html