スポンサーサイト

2023.04.20 Thursday
0

    一定期間更新がないため広告を表示しています

    category:- | by:スポンサードリンク | - | - | -

    jquery DataTablesで初期表示時のソートを無効にする

    2021.10.05 Tuesday 11:59
    0
      jquery DataTablesで
      初期表示時のソートを無効にする
      まずは見た目順に表示する場合

      $('#table1').DataTable({
      "order": [],
      category:jquery | by:ittoocomments(0) | - | -

      jqueryui sortable テスト マウスドラッグで並び替えの順番を変える

      2017.02.19 Sunday 23:13
      0
        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Sortable - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 500px; }
        // #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        // #sortable li span { position: absolute; margin-left: -1.3em; }
        #sortable li { height:20px; }
        .numid { height:20px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

        .x-y {
        border: solid 0px orange;
        background: lemonchiffon;
        width: 360px;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        overflow-x: auto;
        overflow-y: hidden;
        }

        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
        $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
        } );
        </script>
        </head>
        <body>





        ポイントは 並び順の番号は、id="sortable" の外がわに記載すること。そうでないと
        ドラッグすると全部うごいてしまう。
        <table >
        <tr >
        <td style="vertical-align:top;">
        <div class="numid">1</div>
        <div class="numid">2</div>
        <div class="numid">3</div>
        <div class="numid">4</div>
        <div class="numid">5</div>
        <div class="numid">6</div>
        <div class="numid">7</div>
        </td>
        <td>
        <ul id="sortable" class="x-y" style="white-space: nowrap;">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
        </td>
        </tr>
        </table>






        </body>
        </html>
        category:jquery | by:ittoocomments(0)trackbacks(0) | -

        ad
        Calender
             12
        3456789
        10111213141516
        17181920212223
        24252627282930
        31      
        << March 2024 >>
        Selected entry
        PR
        Category
        Archives
        Recommend
        Link
        Profile
        Search
        Others
        Mobile
        qrcode
        Powered
        無料ブログ作成サービス JUGEM