layui テーブルのページネーションが有効にならない場合の対処方法-ライユイのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ライユイのチュートリアル

layui テーブルのページネーションが有効にならない場合の対処方法

藏色散人

Nov 19, 2020 am 11:46 AM

layui

layui テーブルページングが有効にならない場合の解決策: まず、対応するコードファイルを開き、次にコードを "var dom = $("

" で十分です。

layui テーブルのページネーションが有効にならない場合の対処方法

## このチュートリアルの動作環境: Windows 7 システム、 layui バージョン 2.5.6 では、この方法はすべてのブランドのコンピューターに適用できます。

推奨事項: "

layUI チュートリアル "

ページングが機能しない問題の解決策layuiの層がテーブルを開いた後は無効です

1. 元のコード:

<body>
<div id="showalladdableavms" style="display: none;width:100%">
    <table id="demo" lay-filter="test"></table>
</div> -->
</body>
<script>
filldata(table,"#demo","getDateForUserJurisdiction.gds");
layer.open({
                               type:1,
                               title:"添加机器",
                               maxmin:true,
                               area:["100%","100%"],
                               btn:["确认添加"],
                               content: $("#showalladdableavms").html(),
                               success: function (layero) {
                              var btn = layero.find(&#39;.layui-layer-btn&#39;);
                              btn.css({&#39;position&#39;:&#39;relative&#39;,&#39;top&#39;:"-93%","text-align":"left","left":"8%"});
                              },
                              btn1:function(index, layero){
                                  //console.log(layero, index);
                                  var res = getoperavms(&#39;demo&#39;);
                                  console.dir(res)
                              }
                             });
function filldata(table,id,url){
              table.render({
                  elem: id,
                  height:"560"
                  ,url:url //数据接口
                  ,method: &#39;POST&#39;
                  ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                  ,page:true/*  { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            first: true //显示首页
                           ,last: true //显示尾页
                  } */
                   ,limits : [10,20,30]
                   ,limit:10
                  ,request: {
                    pageName: &#39;page&#39;,//页码的参数名称，默认：page
                  } 
                  ,cols: [[ //表头
                             {checkbox:true} 
                          ,{field: &#39;id&#39;, title: &#39;ID&#39;, width:80, sort: true}
                          ,{field: &#39;avm&#39;, title: &#39;机器编号&#39;, width:80}
                          ,{field: &#39;company&#39;, title: &#39;公司名称&#39;, width:80}
                          ,{field: &#39;area&#39;, title: &#39;区域&#39;, width:80, sort: true}
                          ,{field: &#39;circuit&#39;, title: &#39;线路&#39;, width:80} 
                          ,{field: &#39;position&#39;, title: &#39;位置&#39;, width: 177}
                          ,{field: &#39;goodsxml&#39;, title: &#39;商品库&#39;, width: 80, sort: true}
                          
                        ]]
                  ,where : {
                  //传值 startDate : startDate,
                          allavm:&#39;yes&#39;
                    }
                  ,response: {
                         // statusName: &#39;code&#39; //数据状态的字段名称，默认：code
                         //,statusCode: 200 //成功的状态码，默认：0
                         //,msgName: &#39;message&#39; //状态信息的字段名称，默认：msg
                         countName: &#39;total&#39; //数据总数的字段名称，默认：count
                         ,dataName: &#39;rows&#39; //数据列表的字段名称，默认：data
                        }
                   /* done:function(){
                             layer.open({
                                   type:1,
                                   maxmin:true,
                                   area:["800px","600px"],
                                   content: $("#showalladdableavms")
                                 });
                             } */
                 });
        }
</script>

2. 現象: ページング、選択ボックスなどが操作できません。確認したところ、 html() で取得したイベントは dom オブジェクトを失うとのことですが、これを直接使用すると dom に問題が発生し、dom の内容を表示できなくなります。 : 動的に追加:

var dom = $("<div id=&#39;showalladdableavms&#39; style=&#39;display:none;width:100%&#39;><table id=&#39;demo&#39; lay-filter=&#39;test&#39;></table></div>");
$(&#39;body&#39;).append(dom)

このメソッドは、ページのハードコーディングの問題を解決できますの DOM オブジェクトを開いたときに表示されない、つまり濃い灰色のトーンの問題を同時に解決します。、DOM オブジェクトのイベントもサポートされており、完璧です

以上がlayui テーブルのページネーションが有効にならない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

無限のスクロールにLayUIのフローモジュールを使用するにはどうすればよいですか？Mar 18, 2025 pm 01:01 PM

この記事では、無限のスクロール、セットアップ、ベストプラクティス、パフォーマンスの最適化、および強化されたユーザーエクスペリエンスのカスタマイズをカバーするためにLayUIのフローモジュールを使用して説明します。

LayUIの要素モジュールを使用して、タブ、アコーディオン、および進行状況バーを作成するにはどうすればよいですか？Mar 18, 2025 pm 01:00 PM

この記事では、LayUIの要素モジュールを使用して、タブ、アコーディオン、プログレスバーなどのUI要素を作成およびカスタマイズする方法を詳しく説明します。

LayuiのCarouselモジュールの外観と動作をカスタマイズするにはどうすればよいですか？Mar 18, 2025 pm 12:59 PM

この記事では、LayuiのCarouselモジュールのカスタマイズについて説明し、遷移効果、自動再生設定、カスタムナビゲーションコントロールの追加など、外観と行動のためのCSSとJavaScriptの変更に焦点を当てています。

LayuiのCarouselモジュールを使用して画像スライダーを作成するにはどうすればよいですか？Mar 18, 2025 pm 12:58 PM

この記事では、LayuiのCarouselモジュールを画像スライダーに使用し、セットアップの手順、カスタマイズオプションの実装、自動再生とナビゲーションの実装、およびパフォーマンス最適化戦略についてガイドします。

ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか？Mar 18, 2025 pm 12:57 PM

この記事では、LayUIのアップロードモジュールの設定を、受け入れ、ext、サイズのプロパティを使用してファイルの種類とサイズを制限し、違反のエラーメッセージをカスタマイズすることについて説明します。

LayUIのレイヤーモジュールを使用して、モーダルウィンドウとダイアログボックスを作成するにはどうすればよいですか？Mar 18, 2025 pm 12:46 PM

この記事では、LayUIのレイヤーモジュールを使用してモーダルウィンドウとダイアログボックスを作成する方法、セットアップ、タイプ、カスタマイズ、および避けるべき一般的な落とし穴の詳細について説明します。

LayUIは、BootstrapやSemantic UIなどの他のCSSフレームワークと比較してどうですか？Mar 14, 2025 pm 07:29 PM

シンプルさとパフォーマンスで知られるLayUIは、設計、コンポーネント、統合の容易さに関するブートストラップおよびセマンティックUIと比較されます。 layuiはモジュール性と中国のサポートに優れています。（159文字）

典型的なWebアプリケーションを超えたLayUIのいくつかの高度なユースケースは何ですか？Mar 14, 2025 pm 07:28 PM

LayUIは、基本的なWebアプリを超えてスパ、リアルタイムのダッシュボード、PWA、複雑なデータ視覚化に拡張され、モジュラーデザインとリッチUIコンポーネントを使用してエンタープライズレベルのユーザーエクスペリエンスを強化します（159文字）。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。