5

jQuery プラグイン DataTables を使用しています。HTML の入力と選択を含むデータのテーブルがあります。DataTable 検索フィルターを使用して結果をフィルター処理し、選択した値が [開く] であるすべてのドロップダウンを検索しても、何も変わりません。

これは、テーブル内のすべてのドロップダウンに同じオプションがあり、フィルターがそれらを検索してすべての結果を返すため、すべて一致するためだと思います。

ドロップダウンのすべてのオプションではなく、選択した値のみを検索するフィルターを取得するにはどうすればよいですか?

解決策を見つけようとしましたが、見つけることができるのは次のような結果だけです:

これらはすべて、各列のカスタム フィルターの追加を処理します。既存の DataTable フィルターを使用したいだけです。

例

問題の実例、「オープン」または「クローズ」を検索

コード

<table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input name="name" type="text" value="Need more memory" id="name1"></td>
                <td><select name="status" id="status1">
                        <option value="2">Closed</option>
                        <option selected="selected" value="1">Open</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><input name="name" type="text" value="Can't connect" id="name2"></td>
                <td><select name="status" id="status2">
                        <option selected="selected" value="2">Closed</option>
                        <option value="1">Open</option>
                    </select>
                </td>
            </tr>
        </tbody>
</table>
4

2 に答える 2

0

セルにドロップダウン リストを配置するより良い方法があります。もちろん検索可能です。このテクニックに関する公式チュートリアルを見ることができます。

クライアント側

ドロップダウン リストの作成

プラグインを初期化すると、次のことができます。

<script type="text/javascript">
   $(document).ready(function () {
      $('#datatable').dataTable().makeEditable({
         sUpdateURL: "UpdateData.php",//Server side file accepting AJAX call.
         "aoColumns": [//Column settings.
         {},//1st column with default settings.
         {//2nd column to a drop-down list.
            indicator: 'Saving...',
            loadtext: 'Loading...',
            type: 'select',//This will make it a drop-down list.
            onblur: 'submit',
            data: "{'open':'Open','closed':'Closed'}"
         }]
      });
   });
</script>

キーはデータ部分です。ここで、リストのオプションを定義できます。この部分を PHP 経由で動的に追加することもできます。1 つのオプションの構文は次のとおりです。

'variable_sent_to_UpdateData.php':'Text that will be displayed'

すべてのオプションはコンマで区切る必要があります。

列名

公式チュートリアルに示されているように、列の名前を変更することもできます。これにより、列がサーバーに渡されたときに、DataTables が<th>タグの後に名前を付けなくなります。

<script type="text/javascript">
   $(document).ready(function () {
      $('#datatable').dataTable(
         aoColumns: [//Rename columns contained by AJAX call.
            {sName: "name"},
            {sName: "status"}
         ]
      ).makeEditable({
         //Previous stuff...
      });
   });
</script>

サーバ側

結局のところ、次のデータベースを更新するだけですUpdateData.php。

$id = $_REQUEST['id'];//The id tag of your table's row.
$column = $_REQUEST['columnName'];//Column where the cell was edited.
$value = $_REQUEST['value'];//The new value.
$columnPosition = $_REQUEST['columnPosition'];
$columnId = $_REQUEST['columnId'];
$rowId = $_REQUEST['rowId'];

switch ($column)
{
   case 'name':
      //Do SQL update...
      echo $value;
      break;
   case 'status':
      //Do SQL update...
      echo $value;
      break;
   default: echo 'Error';
}

次の理由から、変数をecho(返す)ことが重要です。$value

  • 更新が成功したことを示します。
  • この値がテーブルの新しい値になります。
  • それ以外の値を返すと、エラー メッセージとしてカウントされ、ポップアップ ウィンドウに表示され、表には変更が表示されません。
于 2013-02-06T04:37:31.960 に答える