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

时间：2017-04-27 17:38:54

标签： jquery jquery-plugins datatables

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

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

提前致谢。

问候。

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

<!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" width="100%">
		<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>

2 个答案:

答案 0 :(得分：0)

请参阅以下代码。

<%@ 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" width="100%">
            <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>

答案 1 :(得分：0)

Bootstrap网站上有一些非常棒的文档会告诉你如何做到这一点！

This website有关于如何使用模态的一些很好的信息，我修改了其中一个教程并创建了这个Bootsnipp片段，它完全符合您的需要：）

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

相关问题
最新问题