0

検索フォームを持つインデックス ファイルがあります。検索結果はテーブルです。index.php の元のテーブルはデータテーブルを使用しており、スタイルと機能の両方が完璧に機能します。これは、searchDate.php ファイルの結果から得られた結果を示す、私の index.php ファイルの一部です。 

            <select name="dateOption" id="dateOption">
                <option value="order"> Order </option>
                <option value="inventory"> Inventory </option>
                <option value="po"> PO# </option>
            </select>
            <input type="text" name="searchinput" id="searchinput" />
            <input type="button" value="SUBMIT" onclick="getDate();" />
        </form>

getDate() 関数は次のとおりです。

function getDate() {
                $.post('searchDate.php' , {   dateKey: $("#searchinput").val(), 
                                              selected: $("#dateOption").val(),
                                              from: $("#date").val(),
                                              to: $("#date2").val()
                                              },
                    function(output) {
                        $('#mainTable').empty();
                        $('#orderSearch').empty();
                        $('#newOrder').empty();
                        $(".line").hide();
                        $("#loadNewInvoice").hide();
                        $('#searchResult').append(output);
                        $('#searchResult').css('display','block');
                        $('#searchResult').show("blind");

                });
            }

結果は、元の作業テーブルと同じ ID とクラスを持つテーブルです。ただし、結果は機能的ではなく、スタイルがありません。前もって感謝します。編集：念のため、cssと私のデータテーブル構成は次のとおりです。

table.display {
margin: 0 auto;
clear: both;
width: 100%;


}

table.display thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
* cursor: hand;

}

table.display tfoot th {
padding: 3px 18px 3px 10px;
border-top: 1px solid black;
font-weight: bold;
}

table.display tr.heading2 td {
border-bottom: 1px solid #aaa;
}

table.display td {
padding: 3px 10px;
}

table.display td.center {
text-align: center;
 }

データ表：

$(document).ready( function () {
var oTable = $('#theTable').dataTable({
"bPaginate": true,
"bScrollCollapse": true,
"iDisplayLength": 15,
"oLanguage": {
        "sSearch": "Search all columns:"
    },
"aoColumnDefs": [
  { "asSorting": [ "desc" ], "aTargets": [ 0 ] }
    ]

} );
4

1 に答える 1

0

私は数回前に同じ問題を抱えていました。Jquery では、すべての ID がページ内で一意である必要があります。このルールを守らないと、うまくいきません!

そのため、テーブルの ID を変更すると、コードは期待どおりに動作するはずです。

于 2012-08-04T11:22:24.827 に答える