如何在引导模式中显示导出按钮？

Posted

技术标签:

【中文标题】如何在引导模式中显示导出按钮？【英文标题】：How to show the Export buttons inside a bootstrap modal? 【发布时间】：2017-09-25 15:31:56 【问题描述】：

我正在使用数据表 jQuery 插件。有预定义的导出按钮 - EXCEL、PDF、COPY、CSV 等。我想使用 3 个导出按钮 - Excel、PDF、复制（html5 版本）。页面上会有一个选项按钮，当用户点击选项按钮时，应该会弹出一个引导模式，用户应该会在模式中看到上述 3 个按钮。

实现此结果的最佳方法是什么？

提前致谢。

问候。

代码如下所示。 我希望用户单击选项按钮，而不是表格顶部的 Excel、PDF 和复制按钮，然后弹出模式并向用户显示 3 个按钮。 当用户点击任何一个按钮时，相应的导出就完成了。

<!DOCTYPE html>
<html>
<head>
	<title>Data Table Example</title>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">

</head>
<body>


<div class="container">

	<div class="row text-right">
		<button data-toggle="modal" data-target="#export-modal" class="btn btn-primary">Options</button>
	</div>
	    
	<div class="row">
	    <div class="modal fade" id="export-modal" tabindex="-1" role="dialog">
	        <div class="modal-dialog" role="document">
	            <div class="modal-content">
	                <div class="modal-header">
	                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
	                    <h4 class="modal-title">Options</h4>
	                </div>
	                <div class="modal-body">
	                    <p>How would you like to export?</p>
	                    <button type="button" class="btn btn-primary">Excel</button>
	                    <button type="button" class="btn btn-success">PDF</button>
	                    <button type="button" class="btn btn-danger">Copy</button>
	                </div>
	            </div><!-- /.modal-content -->
	        </div><!-- /.modal-dialog -->
	    </div><!-- /.modal -->


	</div>

	<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" >
		<thead>
			<tr>
				<th>First name</th>
				<th>Last name</th>
				<th>Position</th>
				<th>Office</th>
				<th>Age</th>
				<th>Start date</th>
				<th>Salary</th>
				<th>Extn.</th>
				<th>E-mail</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Tiger</td>
				<td>Nixon</td>
				<td>System Architect</td>
				<td>Edinburgh</td>
				<td>61</td>
				<td>2011/04/25</td>
				<td>$320,800</td>
				<td>5421</td>
				<td>t.nixon@datatables.net</td>
			</tr>
			<tr>
				<td>Garrett</td>
				<td>Winters</td>
				<td>Accountant</td>
				<td>Tokyo</td>
				<td>63</td>
				<td>2011/07/25</td>
				<td>$170,750</td>
				<td>8422</td>
				<td>g.winters@datatables.net</td>
			</tr>
			<tr>
				<td>Ashton</td>
				<td>Cox</td>
				<td>Junior Technical Author</td>
				<td>San Francisco</td>
				<td>66</td>
				<td>2009/01/12</td>
				<td>$86,000</td>
				<td>1562</td>
				<td>a.cox@datatables.net</td>
			</tr>
			<tr>
				<td>Cedric</td>
				<td>Kelly</td>
				<td>Senior javascript Developer</td>
				<td>Edinburgh</td>
				<td>22</td>
				<td>2012/03/29</td>
				<td>$433,060</td>
				<td>6224</td>
				<td>c.kelly@datatables.net</td>
			</tr>
			<tr>
				<td>Airi</td>
				<td>Satou</td>
				<td>Accountant</td>
				<td>Tokyo</td>
				<td>33</td>
				<td>2008/11/28</td>
				<td>$162,700</td>
				<td>5407</td>
				<td>a.satou@datatables.net</td>
			</tr>
			
		</tbody>
	</table>

</div>


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/vfs_fonts.js"></script>

<script>

    var dataTable = $('#example').DataTable(
        "sDom": "<'exportOptions text-right'B><'table-responsive't><'row'<p>>",
       	"scrollCollapse": true,
        "paging": true,
        // "bSort": true,
        "info": false,

        buttons: [ 
  
        	
                extend:    'excelHtml5',
                text:      'Excel',
                className: 'btn btn-primary',
                title: 'Data export',
                // titleAttr: 'Export all rows to Excel file',
            ,

            
                extend:    'pdfHtml5',
                text:      'PDF',
                className: 'btn btn-primary',
                orientation: 'landscape',
                title: 'Data export',
                // titleAttr: 'Export all rows to PDF file',
                // pageSize: 'LEGAL'

            ,

            
                extend:    'copyHtml5',
                text:      'Copy Data',
                className: 'btn btn-primary',
                // titleAttr: 'Copy all rows to clipboard',
            ,
		],

    );

</script>
</body>
</html>

【问题讨论】：

@davidkonrad 感谢您的提示。请看上面的代码，它是自包含的。 Excel 导出似乎不起作用（在本地工作），复制和 pdf 导出工作正常。 【参考方案1】：

Bootstrap 网站有一些非常棒的文档，可以告诉您如何做到这一点！

This website 有一些关于如何使用模态的重要信息，我改编了其中一个教程并创建了这个 Bootsnipp sn-p，它完全可以满足您的需求:)

http://bootsnipp.com/user/snippets/GQb5R

【讨论】：

我没有正确地问这个问题。请查看已编辑的。【参考方案2】：

请看下面的代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="DatatableQuestion.index" %>

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
    <title>Data Table Example</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>


    <div class="container">

        <div class="row text-right">
            <button data-toggle="modal" data-target="#export-modal" class="btn btn-primary">Options</button>
        </div>

        <div class="row">
            <div class="modal fade" id="export-modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
                            <h4 class="modal-title">Options</h4>
                        </div>
                        <div class="modal-body">
                            <p>How would you like to export?</p>
                            <button type="button" onclick="fnAction('excel');" class="btn btn-primary">Excel</button>
                            <button type="button" onclick="fnAction('pdf');" class="btn btn-success">PDF</button>
                            <button type="button" onclick="fnAction('copy');" class="btn btn-danger">Copy</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->


        </div>

        <table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" >
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger</td>
                    <td>Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>5421</td>
                    <td>t.nixon@datatables.net</td>
                </tr>
                <tr>
                    <td>Garrett</td>
                    <td>Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                    <td>8422</td>
                    <td>g.winters@datatables.net</td>
                </tr>
                <tr>
                    <td>Ashton</td>
                    <td>Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                    <td>1562</td>
                    <td>a.cox@datatables.net</td>
                </tr>
                <tr>
                    <td>Cedric</td>
                    <td>Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                    <td>6224</td>
                    <td>c.kelly@datatables.net</td>
                </tr>
                <tr>
                    <td>Airi</td>
                    <td>Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                    <td>5407</td>
                    <td>a.satou@datatables.net</td>
                </tr>

            </tbody>
        </table>

    </div>


    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.0.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/vfs_fonts.js"></script>

    <script>

        var dataTable = $('#example').DataTable(
            "sDom": "<'exportOptions text-right'B><'table-responsive't><'row'<p>>",
            "scrollCollapse": true,
            "paging": true,
            // "bSort": true,
            "info": false,

            buttons: [

                
                    extend: 'excelHtml5',
                    text: 'Excel',
                    className: 'btn btn-primary hide',
                    title: 'Data export',
                    // titleAttr: 'Export all rows to Excel file',
                ,

                
                    extend: 'pdfHtml5',
                    text: 'PDF',
                    className: 'btn btn-primary hide',
                    orientation: 'landscape',
                    title: 'Data export',
                    // titleAttr: 'Export all rows to PDF file',
                    // pageSize: 'LEGAL'

                ,

                
                    extend: 'copyHtml5',
                    text: 'Copy Data',
                    className: 'btn btn-primary hide',
                    // titleAttr: 'Copy all rows to clipboard',
                ,
            ],

        );

        function fnAction(action) 
            switch (action) 
                case "excel":
                    $('.buttons-excel').trigger('click');
                    break;
                case "pdf":
                    $('.buttons-pdf').trigger('click');
                    break;
                case "copy":
                    $('.buttons-copy').trigger('click');
                    break;
            
        
    </script>
</body>
</html>

【讨论】：

我没有正确地问这个问题。请查看已编辑的。 您可以添加这些自定义按钮并触发点击可数据预定义的导出按钮。 @ChetanGanji，你期待什么？您提供了在相当高级的组合中使用多种开源技术的简要说明或愿望清单。任何人都应该从哪里开始？您可以首先显示使用“选项按钮”创建数据表的代码。 @ganesh 我期待实现类似的目标，但由于我没有太多 jquery 和数据表经验，所以无法实现。您可以在上面看到我的示例代码。你现在可以帮忙吗？

以上是关于如何在引导模式中显示导出按钮？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 asp.net 按钮单击在引导模式中停止刷新页面

在引导表中如何使用 jQuery 更改默认按钮图标

提交后如何关闭引导模式？

如何在 Vue 笑话测试中等待引导模式动画完成

如何在 Django 中使用引导模式对表数据进行删除确认？

如何使用浏览器后退按钮关闭引导模式而不是返回页面？`