ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップ可能なソートは可能ですか?

ブートストラップ可能なソートは可能ですか?

(*-*)浩
(*-*)浩オリジナル
2019-07-11 11:08:463134ブラウズ

BootstrapTable の列を並べ替える方法。

ブートストラップ可能なソートは可能ですか?

まずテーブルを作成し、ajax を使用してデータをクエリし、すべての列を並べ替えます。あなた自身のニーズを満たしてください。 (推奨される学習: Bootstrap ビデオ チュートリアル )

data-sortable="true"、この属性は列に追加され、上下の並べ替え矢印を表示します。

<div style="float: left; width: 100%;">
<div class="clearfix"></div>
<table id="dataTable" style="font-size: 12px;" data-toolbar="#timeSearch"
    data-toggle="table" 
    data-locale="zh-CN" 
    data-ajax="ajaxRequest"
    data-side-pagination="server" 
    data-striped="true"
    data-click-to-select="true" 
    data-sort-name="id"
    data-sort-order="desc" 
    data-row-style="rowStyle"
    data-pagination="true" data-pagination-first-text="首页"
    data-pagination-pre-text="上一页" data-pagination-next-text="下一页"
    data-pagination-last-text="末页" data-show-jumpto="true">
    <thead style="text-align: center;"> 
        <tr>
            <th data-radio="true"></th>
            <th data-field="id" 
                data-width="40" data-formatter="indexFormatter" data-halign="center" data-align="center">序号</th>
            <th data-field="code" data-sortable="true" data-formatter="codeFormatter" data-halign="center" data-width="280"
                data-align="center">编码</th>
            <th data-field="field1" data-halign="center" data-sortable="true" data-width="280"
                data-align="center">字段1</th>
            <th data-field="field2" data-halign="center" data-sortable="true" data-width="280"
                data-align="center">字段2</th>
            <th data-field="field3" data-halign="center" data-sortable="true" data-width="280"
                data-align="center">字段3</th>
            <th data-field="field4" data-halign="center" data-sortable="true" data-width="280"
                data-align="center">字段4</th>
        </tr>
    </thead>
</table>
</div>

Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップ可能なソートは可能ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。