how to use bootstrap-table Export extension

19,944

I've just done a jsfiddle looking at some issues with export. This may help you. jsfiddle.

        <div id="toolbar">
  <select class="form-control">
    <option value="">Export Basic</option>
    <option value="all">Export All</option>
    <option value="selected">Export Selected</option>
  </select>
</div>
<table id="table"
       data-toggle="table"
       data-toolbar="#toolbar"
       data-show-export="true"
       data-pagination="true"
       data-maintain-selected="true"
       data-page-size="5"
       data-page-list="[5, 25, 50, 100, ALL]"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/"
       data-export-options='{
         "fileName": "test", 
         "ignoreColumn": ["state"]
       }'
       >
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">ID</th>
        <th data-field="name">Name</th>
        <th data-field="price">Price</th>
    </tr>
    </thead>
</table>

Mine is a little different, one thing I have is refreshOptions instead of destroy in $table.bootstrapTable('destroy').bootstrapTable({

19,944

bwatson30

Updated on June 04, 2022

Comments

bwatson30 almost 2 years

I've got a table I want to be able to export. I stumbled upon bootstrap-table at http://bootstrap-table.wenzhixin.net.cn/ and thought it was awesome, so I started using some of the stuff. pagination, search, other stuff working, great! but I can't figure out how to get the damn export extension to work! I've been at this for sooo long, searching forums, blogs, and the documentation on github. Anyway, so here's where I'm at.

I ran

npm install bootstrap-table

then I added lines to my header, and a script to my body from this example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/export.html and now my index.html.erb looks like this:

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="../assets/examples.css">
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="../ga.js"></script>
</head>
<body>


<div class="container">

    <div id="toolbar">
        <select class="form-control">
            <option value="">Export Basic</option>
            <option value="all">Export All</option>
            <option value="selected">Export Selected</option>
        </select>
    </div>
<div class="booyah-box">
<table id="table" 
       data-toggle="table"
       data-show-export="true"
       data-pagination="true"
       data-click-to-select="true"
       data-toolbar="#toolbar"
       data-url="../json/data1.json"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-search="true"
       data-show-pagination-switch="true"
       data-show-columns="true"
       data-minimum-count-columns="2"
>

<thead>
  <tr>
    <th data-field="state" data-checkbox="true">Select</th>
    <th data-field="Project ID">Project ID</th>
    <th data-field="Status">Status</th>
    <th data-field="Project Type">Project Type</th>
    <th data-field="Marker Strategy">Marker Strategy</th>
    <th data-field="Traits">Traits</th>
    <th data-field="Line">Line</th>
    <th data-field="Line Origin">Line Origin</th>
    <th data-field="Market Region">Market Region</th>
    <th data-field="Governance Qualifier">Governance Qualifier</th>
    <th data-field="New Start Year">New Start Year</th>
    <th data-field="Initial Version Test Year">Initial Version Test Year</th>
    <th data-field="Estimated Version Test Year">Estimated Version Test Year</th>
    <th data-field="Last Location">Last Location</th>
    <th data-field="Trait Code">Trait Code</th>
    <th data-field="CMS Subtype/Type">CMS Subtype/Type</th>
    <th data-field="NEIS">NEIS</th>
    <th data-field="Root ID1">Root ID1</th>
    <th data-field="Root ID2">Root ID2</th>
  </tr>
</thead>


<tbody>
    <% @tiprojects.each do |x| %>
      <tr>
        <td></td>
        <td><%= x.pidtc %></td>
        <td><%= x.status %></td>
        <td><%= x.protype %></td>
        <td><%= x.marker_strategy %></td>
        <td><%= x.traits.upcase %></td>
        <td><%= x.line %></td>
        <td><%= x.origin %></td>
        <td><%= x.market_region.upcase %></td>
        <td><%= x.governance_qualifier %></td>
        <td><%= x.new_start_year %></td>
        <% if x.initial_vt_year == 9999 %>
        <td>Not Applicable</td>
        <% else %>
        <td><%= x.initial_vt_year %></td>
        <% end %>
        <td><%= x.estimated_vt_year %></td>
        <td>NA</td>
        <td><%= x.trait_code %></td>
        <td><%= x.cms_subtype %></td>
        <td><%= x.neis %></td>
        <td><%= x.root_pidtc1 %></td>
        <td><%= x.root_pidtc2 %></td>
      <% end %></tr>
    </tbody>
  </table>
<br />
<% if current_user.admin? %>
<%= link_to "Download Template Upload", download_csv_path %>
<br />
<%= form_tag import_ti_projects_path, multipart: true do %>
  <%= file_field_tag :file %><br />
  <%= submit_tag "Upload New Projects" %>
<% end %>
<% end %>
</div>
<script>
var $table = $('#table');
$(function () {
    $('#toolbar').find('select').change(function () {
        $table.bootstrapTable('destroy').bootstrapTable({
            exportDataType: $(this).val()
            showExport: 'true'

        });
    });
})

</script>

</body>