最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS-AdminLTE中显示表格Hover Data Table

ReactJS crifan 3272浏览 0评论

折腾:

【已解决】ReactJS-AdminLTE如何新写一个页面并编译为生产环境版本

期间,想要去实现一个表格。

最好是:

AdminLTE | Data Tables

AdminLTE 2 | Data Tables

中的Hover Data Table

adminLTE reactjs table

Have any companies/projects used React.js to create dashboards? How has the experience been? – Quora

adminLTE  table

AdminLTE problem with table · Issue #309 · almasaeed2010/AdminLTE

Boostrap .table problem in Datatable AdminLTEv2 · Issue #703 · almasaeed2010/AdminLTE

How to apply datatables in AdminLTE? Is it already built in or not? · Issue #817 · almasaeed2010/AdminLTE

Table Fixed header · Issue #1338 · almasaeed2010/AdminLTE

Big table · Issue #704 · almasaeed2010/AdminLTE

Data Table is not responsive when i choose mobile device. · Issue #848 · almasaeed2010/AdminLTE

adminLTE  table table-bordered table-hover

adminlte table example

Create Simple CRUD with Datatables, Jquery and AdminLTE

结果是用的Jquery生成的table

而不是我要的Reactjs版本的table

Table Fixed header · Issue #1338 · almasaeed2010/AdminLTE

need to get table head fixed while scrolling through table body can you post the code.. advance thanks · Issue #591 · almasaeed2010/AdminLTE

html – Table header to stay fixed at the top when user scrolls it out of view with jQuery – Stack Overflow

Add Slimscroll to simple table · Issue #495 · almasaeed2010/AdminLTE

用随便拷贝的代码:

                            <section className=”content”>
                                <div className=”row”>
                                    <section className=”col-lg-7 connectedSortable ui-sortable” >
                                        <div className=”box box-primary”>
                                            <div className=”box-header ui-sortable-handle”>
                                                <i className=”ion ion-clipboard”></i>
                                                <h3 className=”box-title”>To Do List</h3>
                                                <div className=”box-tools pull-right”>
                                                    <ul className=”pagination pagination-sm inline”>
                                                        <li><a href=”#”>«</a></li>
                                                        <li><a href=”#”>1</a></li>
                                                        <li><a href=”#”>2</a></li>
                                                        <li><a href=”#”>3</a></li>
                                                        <li><a href=”#”>»</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div className=”box-body” >
                                                <ul className=”todo-list ui-sortable”>
                                                </ul>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <div className=”row”>
                                    <section className=”col-lg-9″ >
                                        <table id=”example” class=”table table-bordered table-hover”>
                                            <thead>
                                                <tr>
                                                    <th>Col1</th>
                                                    <th>Col2</th>
                                                    <th>Col3</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>info</td>
                                                    <td>info</td>
                                                    <td>info</td>
                                                </tr>
                                                <tr>
                                                    <td>info</td>
                                                    <td>info</td>
                                                    <td>info</td>
                                                </tr>
                                                <tr>
                                                    <td>info</td>
                                                    <td>some really long line here instead</td>
                                                    <td>info</td>
                                                </tr>
                                                <tr>
                                                    <td>info</td>
                                                    <td>info</td>
                                                    <td>info</td>
                                                </tr>
                                                        <tr>
                                                    <td>info</td>
                                                    <td>info</td>
                                                    <td>info</td>
                                                </tr>
                                                        <tr>
                                                    <td>info</td>
                                                    <td>info</td>
                                                    <td>info</td>
                                                </tr>
                                                <tr>
                                                    <td>info</td>
                                                    <td>info</td>
                                                    <td>info</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </section>
                                </div>
                            </section>
                        </div>

效果:

看到官网demo:

AdminLTE 2 | Data Tables

想起来了,应该去参考官网的示例代码才对。

然后去照葫芦画瓢写table

然后加了代码:

                            <section className=”content”>
                                <table id=”example2″ className=”table table-bordered table-hover”>
                                    <thead>
                                    <tr>
                                    <th>Rendering engine</th>
                                    <th>Browser</th>
                                    <th>Platform(s)</th>
                                    <th>Engine version</th>
                                    <th>CSS grade</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                   。。。
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                    <th>Rendering engine</th>
                                    <th>Browser</th>
                                    <th>Platform(s)</th>
                                    <th>Engine version</th>
                                    <th>CSS grade</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </section>

效果是:

虽然table出来了:

也有hover的效果:

但是没有分页。

最后:

【已解决】ReactJS-AdminLTE中如何使得DataTable分页显示

转载请注明:在路上 » 【已解决】ReactJS-AdminLTE中显示表格Hover Data Table

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.208 seconds, using 22.13MB memory