Layui は複数条件クエリのサンプルコードを実装します

<form class="layui-form" action="">
		<div class="layui-inline">
			<label class="layui-form-label">グレード</label>
			<div class="layui-input-inline">
				<input type="text" id="grade" name="grade" placeholder="グレードを選択してください"
					オートコンプリート="オフ" クラス="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">プロフェッショナル</label>
			<div class="layui-input-inline">
				<select name="majorid" id="majorid">
					<option value="">選択してください</option>
				</選択>
			</div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<button class="layui-btn" id="searchBtn" lay-submit
					lay-filter="formDemo" データタイプ="reload" スタイル="margin-left: 15px">
					<i class="layui-icon layui-icon-search"></i> 検索 </button>
				<button type="reset" class="layui-btn layui-btn-primary">リセット</button>
			</div>
		</div>
	</フォーム>

// カレンダーに表示される成績 var laydate = layui.laydate;
	laydate.render({
		elem : '#grade', //要素タイプを指定: 'year'
	});

	//ドロップダウンボックスプロフェッショナルを取得する $.ajax({
		url: '../../MajorFindAllServlet?deptid=5',
		データ型: 'json',
		データ ： {
			'状態' : 0
		}, // 通常のステータスを持つすべての機関タイプを照会します。タイプ: 'post',
		成功: 関数(データ) {
			$.each(データ、関数(インデックス、項目) {
				$('#majorid').append(
						new Option(item.majorname, item.majorid)); // ドロップダウン メニューに要素を追加します });
			layui.form.render("選択");
		}
	});

layui.use(['table', 'laydate', 'form'], 関数() {...}

//テーブルを生成 var table = layui.table;
	テーブルをレンダリング({
		要素: '#table',
		url: '../../ClassesFindByPageServlet',
		ツールバー: '#toolbarDemo',
		title: 'クラステーブル', //エクスポートファイル名ページ: {
			レイアウト:['count','prev','page','next', 'skip']
		}, //ページングIDを開く: 'tableAll',
		どこ ： {
			マジョリッド: ''、
			学年 ： ''
		},
		リクエスト ： {
			'limitName' : 'pageSize' //ページあたりのエントリ数のデフォルトフィールドをpageSizeに変更します
		},
		cellMinWidth : 80, //通常のセルの最小幅をグローバルに定義します。LayUI 2.2.1 で追加されました cols : [ [ {
			タイプ: 'チェックボックス'、
			固定: '左'
		}, {
			フィールド: 'classid'、
			タイトル: 「クラス番号」
		}, {
			フィールド: 'クラス名',
			タイトル: 'クラス名'
		}, {
			フィールド: 'deptname',
			タイトル: 「部門名」
		}, {
			フィールド: 'majorname',
			タイトル: 「職業名」
		}, {
			フィールド: 'グレード'、
			タイトル: 'グレード'、
			ソート: true
		}, {
			固定：「正しい」、
			タイトル: 「作戦」
			ツールバー: '#barDemo'
		} ] ]
	});

//クエリボタンをクリックしてテーブルを再読み込みします $('#searchBtn').on('click', function() {
		テーブルを再読み込み('tableAll', {
			メソッド: 'post'、
			どこ ： {
				グレード: $('#grade').val(),
				メジャーID: $('#majorid').val()
			},
			ページ: {
				通貨: 1
			}
		});
		false を返します。
	});