PHPとJavascriptを使用してかなり単純なサイトを構築し、検索結果でいっぱいのテーブルを返しましたが、何らかの理由で、検索結果でいっぱいのテーブルがInternetExplorer9以下で約2ページ下に返されます。結果は、モバイルを含む最新のブラウザで見栄えがします。結果がプッシュされるページの下の距離は、返される結果の数に比例することがわかりました。また、何千もの結果が返された場合、Androidタブレットで空白の空白にパンすることができます。通常、幅は固定されています。
<table width='100%' class="table table-bordered table-hover table-condensed">
<colgroup width='18%'/>
<colgroup id='colgroup' class='colgroup' align='center'
valign='middle' title='title' width='1*' span='3' />
<thead>
<tr>
<th>Drawing</th>
<th>Project Title</th>
<th>Sheet Title</th>
<th>Drawing Date</th>
</tr>
</thead>
<tbody>
<?php
// gets value sent over search form
$locnum = $_GET['locnum'];
$drawnum = $_GET['drawnum'];
$projttitle = $_GET['projtitle'];
$shttitle = $_GET['shttitle'];
$shtnum = $_GET['shtnum'];
$discp = $_GET['discp'];
$drawdate = $_GET['drawdate'];
//set minimum query length
$min_length = 2;
// if query length is more or equal minimum length then
if(strlen($locnum) OR strlen($drawnum) OR strlen($projttitle) OR strlen($shttitle) OR strlen($shtnum) OR strlen($discp) OR strlen($drawdate) >= $min_length){ // if query length is more or equal minimum length then
// changes characters used in html to their equivalents, for example: < to >
$locnum = htmlspecialchars($locnum);
$drawnum = htmlspecialchars($drawnum);
$projttitle = htmlspecialchars($projttitle);
$shttitle = htmlspecialchars($shttitle);
$shtnum = htmlspecialchars($shtnum);
$discp = htmlspecialchars($discp);
$drawdate = htmlspecialchars($drawdate);
// makes sure nobody uses SQL injection
//mysql_real_escape_string is deprecated as of PHP 5.5.0 and will be removed in the future
$locnum = mysql_real_escape_string($locnum);
$drawnum = mysql_real_escape_string($drawnum);
$projttitle = mysql_real_escape_string($projttitle);
$shttitle = mysql_real_escape_string($shttitle);
$shtnum = mysql_real_escape_string($shtnum);
$discp = mysql_real_escape_string($discp);
$drawdate = mysql_real_escape_string($drawdate);
//this query isn't perfect...ideally Location Number would be an exact match rather than containing the variable, but if I make that change, it becomes impossible to search on the other fields while $locnum is blank
$raw_results = mysql_query("SELECT * FROM draw
WHERE (`LocationNumber` LIKE '".$locnum."%' && `DrawingNumber` LIKE '%".$drawnum."%' && `ProjectTitle` LIKE '%".$projttitle."%' && `SheetTitle` LIKE '%".$shttitle."%' && `SheetNumber` LIKE '%".$shtnum."%' && `Discipline` LIKE '%".$discp."%' && `DrawingDate` >= '".$drawdate."%') ORDER BY LocationNumber, DrawingNumber, Discipline, SheetNumber") or die(mysql_error());
//ORDER BY LocationNumber, DrawingNumber, Discipline
//'%$locnum%' has wildcards built in
//if you want exact match use `field`='$locnum'
// or if you want to match just full word use '% $locnum %' ...OR ... '$locnum %' ... OR ... '% $locnum'
//Number of results
echo "<p><b>".mysql_num_rows($raw_results)." results"."</b>";
//Sort order dropdown
echo
"  Click any table heading <b>to sort</b> search results. <b>To save</b> a PDF, right-click link and choose Save-As or similar.</p>";
//begin while loop
if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following
while($results = mysql_fetch_array($raw_results)){
// $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop
//I need to replace all "\" in the 'Path' field with "/". The hyperlink works fine in Chrome but not Firefox...haven't tried IE yet
echo "<tr>"."<td><b>"."<a href= http://facilities.ucsb.edu/_client/pdf/atlas/drawings/".$results['Path'].">".$results['LocationNumber']." - ".$results['DrawingNumber'].", ".$results['SheetNumber'].", ".substr($results['Discipline'],0,4)." </a></b></td>  <td>".$results['ProjectTitle']."</td><td>".$results['SheetTitle']."</td><td>".substr($results['DrawingDate'],0,10)."</td></tr>";
// posts results gotten from database(title and text) you can also show id ($results['id'])
}
}
else{ // if there is no matching rows do following
echo "No results";
}
}
else{ // if query length is less than minimum
echo "Minimum search length is ".$min_length;
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery.sortElements.js"></script>
<script>
var th = jQuery('th'),
li = jQuery('li'),
inverse = false;
th.click(function(){
var header = $(this),
index = header.index();
header
.closest('table')
.find('td')
.filter(function(){
return $(this).index() === index;
})
.sortElements(function(a, b){
a = $(a).text();
b = $(b).text();
return (
isNaN(a) || isNaN(b) ?
a > b : +a > +b
) ?
inverse ? -1 : 1 :
inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;
});
$('button').click(function(){
li.sortElements(function(a, b){
return $(a).text() > $(b).text() ? 1 : -1;
});
});
</script>
</tbody>
</table>
これを少なくともIE9と互換性を持たせる方法について何かアドバイスはありますか？