2016-04-05 3 views
1

私は、詳細をクリックしたときに データを表示 - CodeIgniterの

Table 1 (Image 1)

今、私は表1をクリックすると(画像をreportcodeを持っている表2からのデータを表示したい2つのテーブル

を持っています1)

Table 2 (Image 2)

そして今、私はここで、モーダルでそれを表示するには、例

1)クリック詳細ボタン - >レポートコードを取得 - >返金名などをモーダルに表示

私は最初に何をすべきか説明できますか?あなたが私にプランを提案してください、任意の答えが評価されます。おかげ

答えて

2

は私の提案は次のとおりです。

1 - 詳細ボタン、すなわち、1つのクラスを追加します。detailButtonとespecific reportCodeとのデータ属性またはHREF。

<table> 
    <tr> 
    <td> ... </td> 
    <td> <button class='detailButton' href='<?php echo $reportCode; ?>' ... </button> </td> 

2に - ページの一番下にjqueryのを追加します。

$('.detailButton').click(function(e){ 
    e.preventDefault(); 
    var reportCode = $(this).attr('href'); 

    var url = "yourUrl/controller/function"; 
    $.post(url,{ code:reportCode },function(data){ 
     //do stuff 
     //i.e: $('.modal').html(data).show(); 
    }); 
}); 

を今、あなたは、reportCodeを取得する機能を持ってPOSTして、コントローラに送信し、あなたが何かを返し、関数が取得応答とhtmlに添付します。

注:コントローラからテーブルを返す必要があります。あなたはdinamicallyビルドすることもできます。

希望すると助かります!

更新: モデルに値をチェックし、exisitinテンプレート(たとえば、詳細テーブルを生成するテンプレート)を使用して、正しい位置(方法1)で添付するデータとしてビューに戻ることができます。 :

function detail(){ 
    $getcode= $this->input->post('reportCode'); 
    $data['showdetail'] = $this->model_expreport->showdetail($getcode); 
    $ret = $this->load->view('detail_template',$data,true); //return as data 
    print_r($ret); 
} 

それとも、方法2を使用することができます。

function detail(){  
    $getcode= $this->input->post('reportCode'); 
    $data['showdetail'] = $this->model_expreport->showdetail($getcode); 

    $this->output->set_content_type('application/json'); 
    $this->output->set_output(json_encode($data)); 
} 

この方法では、ビューでは、反復して、独自のページを構築できるJSONをreciveます。または、完全なビューを作成してデータとして返すこともできます(ビューに追加するだけです)。

両方を使用できます。ビューで

、あなたはどちらかの完全なビューreciveます:https://uno-de-piera.com/cargar-json-con-jquery-y-codeigniter/

+0

ありがとう:

$.post(url,{ code:reportCode },function(data){ $('#modal').html(data); //put the 'detail' response to the modal } 

またはJSONであなたが反復し、独自のdiv dinamicallyを構築しなければならないが、このためのチュートリアルがたくさんありますあなたの提案のために、私はそれを試してみます –

+0

私の答えを参照してください@jpaulet –

関連する問題