前回の処理にコンボボックスにて条件を追加した例。
前回よりデータ件数が多い場合に使用。

フォーム読み込み時に、コンボボックスの内容をデータベースからセット。

条件入力部全体のテーブルを作成し、その中に、入力部とコンボボックスのテーブルを作成。
それぞれのテーブルを、float:leftとfloat:rightで左右に配置。
あとの基本部分は前回と同じ。

ページング処理が「full_numbers」の場合の表示例。

ページング処理が「two_button」の場合の表示例。
「前頁／次頁」のみ表示

css、プラグインは前回と同じです。

sample_form.php

＜?php

/*----------------------------------------*/
/* 出荷実績データ照会（品番）             */
/* コンボボックス用日付（yyyy/mm） */
/*----------------------------------------*/

	//作成データ用
	$response = new stdClass();

	//ＡＳと接続用
	$dsn='AS400';
	$user='USER';
	$pass='PASS';
	$odbc_con = odbc_connect($dsn,$user,$pass);

	if($odbc_con == false){
		exit;
	}

	//日付取得

	$sql = "select min(shskd) as minskd from qshuklor where shkf = '1'";
	$res = odbc_exec($odbc_con,$sql) or die("データ抽出エラー");

	$sql2 = "select max(shskd) as maxskd from qshuklor where shkf = '1'";
	$res2 = odbc_exec($odbc_con,$sql2) or die("データ抽出エラー");

	$min   = 20000000 + intval(odbc_result($res,'minskd'));
	$min   = intval(sprintf("%6.6s", $min));
	$minyy = substr($min,0,4);
	$minmm = substr($min,4,2);

	$max   = 20000000 + intval(odbc_result($res2,'maxskd'));
	$max   = intval(sprintf("%6.6s", $max));
	$maxyy = substr($max,0,4);
	$maxmm = substr($max,4,2);
	
	//fromのselect日付セット（３ヶ月前）

	$maxmm = $maxmm - 3;
	
	if ($maxmm ＜= 0) {
		$maxmm = 12 - $maxmm;
		$maxyy = $maxyy - 1;
 	}

	$select_yymm = $maxyy * 100 + $maxmm;

	$options_from .= '';
	$options_to   .= '';

	$i=0;

	while($min ＜= $max){

		$dsp_date = sprintf("%4d/%2d", $minyy,$minmm);

		//１年前の年月を選択
		if ($min == $select_yymm) {
			$options_from .="＜option value='{$min}'selected>{$dsp_date}＜/option>\n";
		} else {
			$options_from .="＜option value='{$min}'>{$dsp_date}＜/option>\n";
		}

		//現在の年月を選択
		if ($min == $max) {
			$options_to   .="＜option value='{$min}'selected>{$dsp_date}＜/option>\n";
		} else {
			$options_to   .="＜option value='{$min}'>{$dsp_date}＜/option>\n";
		}

		$minmm++;

		if ($minmm > 12) {
			$minmm = 1;
			$minyy++;
		}

		$min = $minyy * 100 + $minmm;

	    $i++;

	}

	$select_from = "＜select name='date_from'>\n{$options_from}＜/select>\n";
	$select_to   = "＜select name='date_to'>\n{$options_to}＜/select>\n";

	odbc_close($odbc_con);

?>

＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
＜html>

＜head>
	＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	＜meta http-equiv="Content-Style-Type" content="text/css" />
	＜meta http-equiv="Content-Script-Type" content="text/javascript" />

	＜link rel="stylesheet" type="text/css" href="../jquery/DataTables/dataTables.css" />
		
	＜script type="text/javascript" language="javascript" src="../jquery/DataTables/jquery.js">＜/script>
	＜script type="text/javascript" language="javascript" src="../jquery/DataTables/jquery.dataTables.js">＜/script>
	＜script type="text/javascript" language="javascript" src="../jquery/DataTables/fnReloadAjax.js">＜/script>
	＜script type="text/javascript" language="javascript" src="../jquery/DataTables/fnPagingInfo.js">＜/script>
	＜script type="text/javascript" language="javascript" src="../jquery/DataTables/fnProcessingIndicator.js">＜/script>

	＜title>出荷実績照会（品番）＜/title>

	＜style type="text/css">
		* {
			font-size: 11pt;
			font-family: "ＭＳ ゴシック",sans-serif;
		}
		/* 表題 ie6の場合記述必要 */
		h1 {
			font-weight: normal;
			color: #000066;
			border-bottom: 1px solid #000066;
			clear: both;
		}
		#table_id #container {
			width: 965px;
			margin: 20px;
		}
		/* テーブルの表題 ie6の場合記述必要 */
		table.display thead th {
			border: 1px solid #000066;
			padding: 2px 0px 1px 2px;
			font-weight: normal;
		/*	cursor: pointer; */
		/*	* cursor: hand; */
			background-color: #000066;
			color: #ffffff;
			text-align: left;
		}
		.header_inp {
			border: 0;
			width: 51px;
			padding: 2px 0px 2px 2px;
			background-color: #000066;
			color:#FFFFFF;
		}
		.inpsval {
			width: 60px;
			margin-left:  3px;
			padding-left: 2px;
		}
		.header {
			border: 0;
			width: 35px;
			padding: 2px 0px 2px 4px;
			background-color: #000066;
			color:#FFFFFF;
		}
		.header_data {
			width: 300px;
			border: 0;
			padding-left: 7px;
			font-family: "ＭＳ Ｐゴシック",sans-serif;
			text-decoration: underline;
		}
		.table_h_main {
			width: 965px;
			border-collapse: collapse;
		}
		.table_h {
			border-collapse: collapse;
			float:left;
		}
		.table_r {
			border-collapse: collapse;
			float:right;
		}
		.highlight_row #tbl tr:hover {
			background-color: #dddddd;
		}
	＜/style>

	＜script type="text/javascript" charset="utf-8">

	var first_load_fg = '1';							//画面ロードＦＧ

	$(document).ready(function() {

		header_clear();								//ヘッダー項目クリア

		var oTable = $('#tbl').dataTable( {
			"bPaginate": true,
			"bScrollCollapse": true,
			"sPaginationType": "full_numbers",			//two_button , full_numbers
			"bLengthChange": true,
			"bFilter": false,
			"bSort": false,
			"bInfo": true,
			"sDom": "＜top>Pl;frti",					//各表示位置
			"bAutoWidth": false,
			"oLanguage": {
				"sLengthMenu": "表示行数 _MENU_ ",
				"sInfo": "件数 _START_-_END_ [_TOTAL_件]",	//(_START_ to _END_) 
				"oPaginate": {"sFirst": "先頭","sLast": "最後","sNext": "> ","sPrevious": " ＜"},		//Pagination full_numbers用
//				"oPaginate": {"sNext": "次頁","sPrevious": "前頁"},										//Pagination two_button用
				"sEmptyTable": " ",
				"sInfoEmpty": "[0件]",
				"sProcessing": "データ読み込み中.."
			},
			"iDisplayLength":24,						//Pagination用
			"iDisplayStart":0,						//Pagination用
			"aLengthMenu": [[12,24, 50, 100, -1], [12,24, 50, 100, "ALL"]],
			"bProcessing": true,
			"bServerSide": false,						//リロードプラグイン使用時はfalse
			"sAjaxSource": "sample_data.php",
			"fnServerData": function ( sSource, aoData, fnCallback ) {
				if (first_load_fg == '0') {				//最初の画面ロード時は処理しない
					$.ajax( {
						"dataType": 'json', 
						"type"    : "POST", 
						"url"     : sSource, 
						"data"    : 'sval='       + $("#sval").val() + 		//パラメータ
								'&sid='       + document.getElementsByName("sid")[0].value +
								'&date_from=' + document.getElementsByName("date_from")[0].value +
								'&date_to='   + document.getElementsByName("date_to")[0].value,
//						"success" : fnCallback
						"success" : function(json) {
							/* Do whatever additional processing you want on the callback, then tell DataTables */

							//ヘッダー項目表示
							header_clear();			//ヘッダー項目クリア
							document.getElementById("shhmei").value  = json.shhmei;
	
							//テーブル表示
							fnCallback(json);
						}
					});
				}
			},
			"aoColumns" : [
				{ "mDataProp": "shskd",  "sWidth" : "80px" , "sTitle":"出荷日",
								"fnRender":function (oObj) {return fmDate(oObj.aData['shskd'])}},		//日付YYYY/MM/DD編集
				{ "mDataProp": "shryo",  "sWidth" : "50px" , "sTitle":"　数量",
								"sClass":"right",
								"fnRender":function (oObj) {return addComma(oObj.aData['shryo'])}},		//数値コンマ編集、右寄せ
				{ "mDataProp": "shjkey", "sWidth" : "80px" , "sTitle":"ＦＮＯ"},
				{ "mDataProp": "shjsn",  "sWidth" : "70px" , "sTitle":"受信ＮＯ"},
				{ "mDataProp": "shegy",  "sWidth" : "50px" , "sTitle":"営業所"},
				{ "mDataProp": "shnun",  "sWidth" :"600px" , "sTitle":"荷受人名"}
			]
		});

		first_load_fg = '0';						//画面ロードＦＧ'0'セット
		oTable.fnProcessingIndicator(false);			//「読み込み中」クリア
		oTable.fnClearTable();					//テーブルデータクリア

   		//実行ボタン		
		$("#button_ent").click(function(){
			header_clear();						//ヘッダー項目クリア
			oTable.fnClearTable();				//テーブルデータクリア
			oTable.fnReloadAjax();				//再表示
			oTable.fnPageChange( 'first' );			//ページングの最初へ移動
        });

        //クリアボタン		
		$("#button_clr").click(function(){
			header_clear();						//ヘッダー項目クリア
            oTable.fnClearTable();						//テーブルデータクリア
        });

		//ヘッダー項目クリア
		function header_clear() {
			document.getElementById("shhmei").value  = '';
		}

		//日付YYYY/MM/DD編集
		function fmDate(value) {
			var num = value;
			if ( num == 0) {
				num = '';
			} else {
				num = num.slice(0,4) + '/' + num.slice(4,6) + '/' + num.slice(6,8);
			}
			return num
		}
			
		//数値３桁コンマ表示
		function addComma(value) {
			var num = value;
			if ( num == 0) {
				num = '';
			} else {
				while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
			}
			return num
		}

	});
			
	＜/script>
		
＜/head>
	
＜body id="table_id" class="highlight_row">
	
	＜div id="container">

	＜h1>出荷実績照会（品番）＜/h1>

	＜!-- ヘッダー部の全体のテーブル -->
	＜table class="table_h_main">
		＜td>
			＜!-- 入力部 -->
			＜table class="table_h">
				＜tr>	
					＜td>＜div class='header'>品番＜/div>＜/td>＜td>＜input class='inpsval' type="text" id="sval" name="sval" maxlength="7" value="" style="ime-mode: disabled;"/>＜/td>
					＜td>＜input id="button_ent" type="button" value="実行"/>＜/td>
					＜td>＜input id="button_clr" type="button" value="クリア"style="font-family: 'ＭＳ Ｐゴシック'";/>＜/td>
					＜td width='10px'>＜/td>			
					＜td>＜div class='header_1'>品名＜/div>＜/td>
					＜td>＜input class='header_data' readonly type="text" id="shhmei" name="shhmei" value="">＜/td>
				＜/tr>
			＜/table>
		＜/td>
		＜td>
			＜!-- コンボボックス部 -->
			＜table class="table_r">
				＜td>
					＜select name="sid">
                    				＜option value="shrcd">受信日＜/option>
               					＜option value="shskd" selected="selected">出荷日＜/option>
                			＜/select>
				＜/td>
				＜td>
					＜?= $select_from ?>
				＜/td>
				＜td>〜＜/td>
				＜td>
					＜?= $select_to ?>
				＜/td>
			＜/table>
		＜/td>
	＜/table>

	＜br>

	＜!-- 明細テーブル項目 -->
	＜table cellpadding="0" cellspacing="0" border="0" class="display" id="tbl">
		＜tfoot>
			＜tr>
				＜th>＜/th>	＜!-- 線を表示 -->
				＜th>＜/th>
				＜th>＜/th>
				＜th>＜/th>
				＜th>＜/th>
				＜th>＜/th>
			＜/tr>
		＜/tfoot>
	＜/table>

	＜/div>
			
＜/body>
	
＜/html>

sample_data.php

<?php

/*----------------------*/
/* 出荷実績照会（品番） */
/*----------------------*/

	//作成データ用
	$response = new stdClass();

	//日付範囲
	$date_from	= $_POST['date_from'];
	$date_to		= $_POST['date_to'];

	$date_from	= $date_from * 100 + 1;
	$date_to		= $date_to   * 100 + 31;

	$date_from	= substr($date_from,2,6);
	$date_to		= substr($date_to,2,6);

	//選択条件用
	$sid  = $_POST['sid'];
	$sval = $_POST['sval'];
	$sval = strtoupper($sval);

	//ＡＳと接続用
	$dsn='AS400';
	$user='USER';
	$pass='PASS';
	$odbc_con = odbc_connect($dsn,$user,$pass);

	if($odbc_con == false){
		exit;
	}

	//品番チェック

	$sql2 = "select count(*) as cnt from item where i\hin = '$sval' ";
	$res2 = odbc_exec($odbc_con,$sql2) or die("データ抽出エラー");
	$cnt  = intval(odbc_result($res2,'cnt'));

	if ($cnt == 0) {

		//品番エラー

		$response->sEcho = 1;
		$response->iTotalRecords = 0;
		$response->iTotalDisplayRecords = 0;
		if ( !$sval ) {
			$response->shhmei = '';
		} else {
			$response->shhmei = '品番エラー';
		}
		$response->aaData[$i] = '';

	} else {

		//データ部

		//日付範囲
		$where = "$sid between $date_from and $date_to";

		$cnt = 0;

		//件数
		$sql2 = "select count(*) as cnt from qshuklor where shhin = '$sval' and shkf = '1' and $where";

		$res2 = odbc_exec($odbc_con,$sql2) or die("データ抽出エラー");
		$cnt  = intval(odbc_result($res2,'cnt'));

		if ($cnt == 0) {

			//データ０件
			$response->shhmei  = '該当データ無し。';
			$response->aaData[$i] = '';

		} else {

			if ($cnt >= 5000) {

				//データ5,000件以上
				$response->shhmei  = 'データ件数 ' . $cnt . '件。5,000件以下にして下さい。';
				$response->aaData[$i] = '';

			} else {

				//表示用
				$sql = "select  shjsn,
								shjkey,
								shskd,
								shegy,
								shryo,
								shnun,
								shhmei
		   	 	        from qshuklor 
						where shhin = '$sval' and shkf = '1' and $where 
						order by shskd desc, shjsn";

				$res = odbc_exec($odbc_con,$sql) or die("データ抽出エラー");

				$i=0;

				while($row = odbc_fetch_row($res)){

					//数量変換
					$shryo = intval(sprintf("%6d",odbc_result($res,"shryo")));

					//出荷日変換
					$shskd = odbc_result($res,"shskd") + 20000000;
					if ($shskd == 20000000){
						$shskd = '';
					}

					//最初のデータでヘッダーの項目セット
					if ($i == 0) {
						$response->shhmei = mb_convert_encoding(odbc_result($res,"shhmei"),"UTF-8","SJIS");
					}

					$response->aaData[$i] = array('shskd'  => mb_convert_encoding($shskd,"UTF-8", "SJIS"),
						'shryo'  => mb_convert_encoding($shryo,"UTF-8", "SJIS"),
						'shjkey' => mb_convert_encoding(odbc_result($res,"shjkey"), "UTF-8", "SJIS"),
						'shjsn'  => mb_convert_encoding(odbc_result($res,"shjsn"), "UTF-8", "SJIS"),
						'shegy'  => mb_convert_encoding(odbc_result($res,"shegy"), "UTF-8", "SJIS"),
						'shnun'  => mb_convert_encoding(odbc_result($res,"shnun"), "UTF-8", "SJIS")
												);

					$i++;
				}

			}
		}
	}

	odbc_close($odbc_con);

	echo json_encode($response);

?>