Question

在让您知道这个问题之前，我想提出两个不同的表格。在这里，我有一个responsive table http://plnkr.co/edit/WjSQj883tdX92jJoDLaR?p=preview的掠夺者，这里是non-responsive table：http://jsfiddle.net/4r6g4cfu/90/，但有各种选项，如导出，过滤和分页。任何人都可以提供具有导出，过滤和分页选项的响应表的代码。这意味着我需要一个表中的plunker与小提琴示例中的选项。在此先感谢!!

Answer 1

不确定这是否仍然是您的问题。

最近有人要求我在项目中使用表，所以我只写了一些代码，使您可以在页面上有多个响应表。它使用以下逻辑将表标题设置为表行，但我不使用硬编码CSS设置内容：

        td:nth-of-type(1):before { content: "First Name"; }
        td:nth-of-type(2):before { content: "Last Name"; }
        td:nth-of-type(3):before { content: "Job Title"; }
        td:nth-of-type(4):before { content: "Favorite Color"; }
        td:nth-of-type(5):before { content: "Wars of Trek?"; }
        td:nth-of-type(6):before { content: "Porn Name"; }
        td:nth-of-type(7):before { content: "Date of Birth"; }
        td:nth-of-type(8):before { content: "Dream Vacation City"; }
        td:nth-of-type(9):before { content: "GPA"; }
        td:nth-of-type(10):before { content: "Arbitrary Data"; }

由于您无法使用JQuery设置Psuedo元素，因此我不得不在JQuery中使用多种解决方法。

这里是preview

这里是code

Answer 2

js fiddle

使用导出选项

完成您的表格

<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-pagination="true"
       data-side-pagination="server"
       data-page-list="[5, 10, 20, 50, 100, 200]"
       data-search="true"
       data-height="300"
data-response-handler="responseHandler"
data-show-export="true"
               data-click-to-select="true"
               data-toolbar="#toolbar">

        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Favorite Color</th>
            <th>Wars or Trek?</th>
            <th>Porn Name</th>
            <th>Date of Birth</th>
            <th>Dream Vacation City</th>
            <th>GPA</th>
            <th>Arbitrary Data</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>Chief Sandwich Eater</td>
            <td>Lettuce Green</td>
            <td>Trek</td>
            <td>Digby Green</td>
            <td>January 13, 1979</td>
            <td>Gotham City</td>
            <td>3.1</td>
            <td>RBX-12</td>
        </tr>
        <tr>
          <td>The</td>
          <td>Tick</td>
          <td>Crimefighter Sorta</td>
          <td>Blue</td>
          <td>Wars</td>
          <td>John Smith</td>
          <td>July 19, 1968</td>
          <td>Athens</td>
          <td>N/A</td>
          <td>Edlund, Ben (July 1996).</td>
        </tr>
        <tr>
          <td>Jokey</td>
          <td>Smurf</td>
          <td>Giving Exploding Presents</td>
          <td>Smurflow</td>
          <td>Smurf</td>
          <td>Smurflane Smurfmutt</td>
          <td>Smurfuary Smurfteenth, 1945</td>
          <td>New Smurf City</td>
          <td>4.Smurf</td>
          <td>One</td>
        </tr>
        <tr>
          <td>Cindy</td>
          <td>Beyler</td>
          <td>Sales Representative</td>
          <td>Red</td>
          <td>Wars</td>
          <td>Lori Quivey</td>
          <td>July 5, 1956</td>
          <td>Paris</td>
          <td>3.4</td>
          <td>3451</td>
        </tr>
        <tr>
          <td>Captain</td>
          <td>Cool</td>
          <td>Tree Crusher</td>
          <td>Blue</td>
          <td>Wars</td>
          <td>Steve 42nd</td>
          <td>December 13, 1982</td>
          <td>Las Vegas</td>
          <td>1.9</td>
          <td>Under the couch</td>
        </tr>
        </tbody>
    </table>
</table>

响应表问题

2 个答案: