How Can I open the modal popup to display data of one datatable using Link on another page

How Can I open the modal popup to display data of one datatable using Link on another page

Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

I have datatable that I am using to display data for all assets from database. In this table I want to put a link to a field which can open modal popup which can display data from another datatable with selected fields. I check similar questions in forum but mostly all having modal popup for same table where they want to open it. But in my case I want to open modal popup of another table in my page using link.

Please direct me to right direction by providing any working example and reference documents.

Here is my code so far.

Table 1 - where I applied Link to table field called - scadaPoints

    var table = $('#assyntCx_Table').DataTable( {
        dom: 'lBfrtip',

        serverSide: true,
        processing: true,
        ajax: {
          url: "../ajax/at/assets_ss.php",
          type: "POST",
          deferRender: true,

        },

        //TABLE WINDOW
        scrollY:        "65vh",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        fixedColumns:   {
          left: 2
        },


            columns: [
          { data: "id" },
          { data: "designTag",    className: "dt-nowrap", },
          { data: "specTag",      className: "dt-nowrap", },
          { data: "loc",          className: "dt-nowrap", },
          { data: "building",     className: "dt-nowrap", },
          { data: "room",         className: "dt-nowrap editable", },
          { data: "level",        className: "dt-nowrap editable", editField: "A.levels", },
          { data: "assetType",    className: "dt-nowrap editable", editField: "A.assetType",},
          { data: "entity",       className: "dt-nowrap editable", editField: "A.entity",},
          { data: "design",       className: "dt-nowrap editable", },
          { data: "assetStatus",  className: "dt-nowrap editable", editField: "A.assetStatus", },
          { data: "oldID",        className: "dt-nowrap editable", },
          { data: "PR",           className: "dt-nowrap", },
          { data: "SR",           className: "dt-nowrap", },
          { data: "subsystem",    className: "dt-nowrap", },
          { data: "discipline",   className: "dt-nowrap", },
          { data: "PICO",         className: "dt-nowrap", },
          { data: "SAT",          className: "dt-nowrap", },

          // This is the field where I want to apply Link to open Modal popup

          { data: "scadaPoints",          
            className: "dt-nowrap dt-center", 
            render: function ( data, type, row) {
                if ( type === 'display' || type === 'filter' ) {
                if(data != "0"){
                    return '<a href="#" data-toggle="modal" data-target="#scadaModal">'+data+'</a>';

                   // I tried to made button instead link to try below code but its not working
                    //return '<button class="btn btn-primary" data-toggle="modal" data-loopNo="'+row.loopNo+'" data-scadatag="'+row.scadatag+'" data-target="#scadaModal">'+data+'</button>'
                }else{
                    return '';
                }
                //../asset/scadapoints.php?assetID='+row.id+'
            }
            if(data != "0"){
                return data;
            }
            else{
                return '';
            }

            },
        },
          { data: "U.username",   className: "dt-nowrap editable", editField: "A.bic",},
          { data: "assetPhase",   className: "dt-nowrap editable", editField: "A.phase",},
          { data: "seq",          className: "dt-nowrap editable", },
          { data: "comment",      className: "editable", },
            ],

Table 2 - the data of this table I want to display on modal popup. on this table I made modal and try out some code which is not working.

    <div class="container-fluid ms-7 w-auto">
      <div class="card">
        <div class="card-body">
          <div id='phaseTable' class='content'>
            <table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
              <thead>
                <tr>
                  <th data-priority="10" class='text-center'>Loop Number</th>
                  <th data-priority="10" class='text-center'>SCADA Tag</th>
                  <th data-priority="20" class='text-center'>Location</th>
                   <th data-priority="20" class='text-center'>Equipment Tag</th>
                   <th data-priority="20" class='text-center'>Asset Type</th>  
                   <th data-priority="20" class='text-center'>Subsystem</th> 
                   <th data-priority="20" class='text-center'>Level</th> 
                   <th data-priority="20" class='text-center'>Room</th> 
                   <th data-priority="20" class='text-center'>Service Description</th>
                  <th data-priority="30" class='text-center'>PLC ID</th>
                  <th data-priority="30" class='text-center'>Cabinet Tag</th>
                  <th data-priority="30" class='text-center'>Field End Terminated</th>
                  <th data-priority="30" class='text-center'>Marshalling Panel Terminated</th>
                  <th data-priority="30" class='text-center'>Comments</th>
                </tr>
              </thead>

            </table>
          </div>
        </div>
      </div>
    </div> 

    <!-- Scada Model Popup -->
    <div id="scadaModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="modalTitle">Scada Points Details</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div> 


    $(document).ready(function() {

    var table = $('#assyntCx_Table').DataTable( {
        dom: 'lBfrtip',
        ajax: {
          url: "../ajax/at/scadapoints.php",
          type: "POST",
          deferRender: true,

        },

        //TABLE WINDOW
        scrollY:        "65vh",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        fixedColumns:   {
          left: 2
        },


            columns: [
          { data: "A.loopNo",    className: "dt-nowrap", },
          { data: "A.scadaTag",          className: "dt-nowrap", },
          { data: "LocationName",          className: "dt-nowrap", },
          { data: "T.assetTag",          className: "dt-nowrap", },
          { data: "assetTypeName",          className: "dt-nowrap", },
          { data: "systemName",          className: "dt-nowrap", },
          { data: "levelTLA",     className: "dt-center", },
          { data: "Room",    className: "dt-center", },
          { data: "status",         className: "dt-nowrap", },
          { data: "A.plcID",    className: "dt-nowrap"},
          { data: "A.cabinetTag",       className: "dt-nowrap"},
          { data: "FTerminated",      className: "dt-center"  },
          { data: "MPTerminated",      className: "dt-center"},
          { data: "A.comments",      className: "dt-nowrap", },
            ],

        //SHOW SELECTION & SAVE PREVIOUS STATE
        select: true,
        stateSave: false,

        //DISABLE AUTOWIDTH
        "autoWidth" : false,

        //BUTTONS
        buttons: [],

        //PAGINATION OPTIONS
        pageLength: 250,
        lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],

        initComplete: function() {
          var api = this.api();

          // Apply the search
          api.columns().every(function() {
            var that = this;

            $('input', this.footer()).on('keyup change', function() {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
        }
      } );

    //   SCADA MODEL

      $("#scadaModal").on('show.bs.modal', function (e) {

         var triggerLink = $(e.relatedTarget);
         var loopNo = triggerLink.data("A.loopNo");
         var scadatag = tiggerLink.data("A.scadaTag");

         $("#modalTitle").text(title);
         $(this).find(".modal-body").html("<td>Loop No: "+loopNo+"</td><td>Scada Tag: "+scadatag+"</td>");
       });



    });

Answers

  • colincolin Posts: 14,610Questions: 1Answers: 2,493

    That should be possible just using the API, but I'm struggling to understand the flow here. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @colin Hello I am not sure how I can make link that open another data table in test case. So here is the picture 1 of Table 1 where my Link is placed and when I click on link it should open modal popup on the same page but modal popup should contain details from another table with marked fields in 2nd picture.

    Picture 1 - Table 1 - where I clicked on Scada Points column - number 1 , it should open modal popup window on same page, which will display - information of that scada point stored in Table 2. (Want to display only red marked columns)

    Picture 2 - Table 2

    Currently when I click on Link it redirect to the Table - 2 page. Instead of the only Link I want to open popup window on Table - 1 page with information from Table - 2.

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    Sounds like you want to create a click event, see the event delegation example, and in the event handler use .modal('show') to display the modal. Does the Scada Points value, or some other value from the row, need to be passed to the modal Datatable to load the correct data?

    Once the modal is shown, the show.bs.modal event, you will want to populate the scada Datatable with the appropriate data. There are a number of ways to do this depending on your needs. Maybe you will want to initialize the Datatable the first time then use ajax.reload() for subsequent modals. You can use ajax.data as a function to pass data any IDs from the main table to the server, see this example. You can use DataTable.isDataTable() to determine whether to initialize a new Datatable or use ajax.reload().

    Hope these ideas help. Let us know if there are further questions.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren

    ** Does the Scada Points value, or some other value from the row, need to be passed to the modal Datatable to load the correct data?**

    Yes here in First Table Spec Tag column's value and in Second Table Equipment Tag column's value is same. So I believe if I create a click event, it won't work as I want. I checked event delegation example. In that whatever value you clicked in row , popup window is appear. But I want to just make 'Scada Points column's Value' in Table 1 as a Link ( Click). So we are not passing any value manually but it Should only display specific 'Spec Tag value's ' information from table - 2 ( which is field - Equipment Tag).

    I am also not sure whether I create modal in correct file or not. Currently I created modal in Table - 2 file code. But I want to display popup window in table - 1 page (Project Wide Page).

    Please advice and also provide example code available for similar issue.

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    But I want to just make 'Scada Points column's Value' in Table 1 as a Link ( Click). So we are not passing any value manually

    Makes sense. It seems like your show.bs.modal event handler should pick that up. You can then use that as part of the parameters passed in the ajax.data function.

    I'm not a Bootstrap modal expert but I would guess the modal should be on the same page that you want to display it.

    If you want help with an example please start building your code using one of the JS BIN templates here. You can use the Download Builder to grab the Bootstrap and Datatables code for the test case.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0
    edited April 2022

    I'm not a Bootstrap modal expert but I would guess the modal should be on the same page that you want to display it.

    Okay I will try using on that page when I want popup to display. But my question is " to display data of another table on that page ( where i want modal popup) how can I fetch data?". I mean I check ajax.data function, but my data that I want to display is stored in another datatable on another page in website. So should i use > ajax.url() function ? and apply page link there ? it will work ? @kthorngren

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    Sorry, I'm still not following everything. Sounds like you have two webpages each with Datatable. One Datatable shows data from assets_ss.php and the other page shows data from scadapoints.php. When you click the link on the assets_ss.php table you want to display data from scadapoints.php. I assume this modal will be on the same page as assets_ss.php.

    You wont be able to get the data from the other scadapoints.php page. You will need to fetch the data via ajax to display in the modal. Are you wanting to display all the data from scadapoints.php or filter it based on the row clicked?

    Kevin

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    Figured it would be easier with a simple demonstration:
    http://live.datatables.net/tekurocu/1/edit

    I built a simple modal and used the link similar to your code snippet to pass data from the row. It uses destroy to reinitialize the Datatable each time the modal is opened. The modal table uses aax.data as a function to pass the office of the row clicked. The example uses ajax.dataSrc to simulate the filtering the server would do. You wouldn't use this as part of the solution.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren Hello Kevin, apologies for late response. Yes you are correct. I have two webpages each with datatable. I want a link on one Datatable which shows data from assets_ss.php and when I click the link I want to display data from scadapoints.php table in modal popup.

    Are you wanting to display all the data from scadapoints.php or filter it based on the row clicked?

    No I dont want all data from scadapoints.php , I want selected data which marked with Red color in picture.

    I want following columns from scadapoints.php

    columns: [
          { data: "A.loopNo",    className: "dt-nowrap", },
          { data: "A.scadaTag",          className: "dt-nowrap", },
          { data: "status",         className: "dt-nowrap", },
          { data: "A.plcID",    className: "dt-nowrap"},
          { data: "FTerminated",      className: "dt-center"  },
          { data: "MPTerminated",      className: "dt-center"},
            ],
    

    so when I click on asset_ss.php - column SCADA points - it should open that specific row's data... I mean specific Spec Tag value's information from scadapoint.php

    Spec tag column in asset_ss.php - > { data: "specTag", className: "dt-nowrap", }, and Equipment tag column in scadapoint.php - > { data: "T.assetTag", className: "dt-nowrap", }, is same. So when I clicked on link it should open that row's SpecTag value's information from another datatable - scadapoint.php

    so how I can do that. I checked example you shared but still confuse how do I fetch data from another datatable

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    There is not a way to get the data from another web page. You will need to fetch the data from the server using ajax. You can send the clicked SpecTag, as a parameter, in the ajax request. The server script will need to get the parameter and use it to filter the datatabse query to return only the rows you want.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren okay thank you kevin. Is there any similar example link that you can share which can fetch data from server using ajax with parameter and take that parameter to use it to filter data ?

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    The example I provided shows the clients side. As explain the ajax.dataSrc is not needed as it is used simply for the demo. There isn't a server script in the JS BIN environment to accept parameter for filtering.

    I don't use PHP so don't have specifics but you could take the scadapoints.php script and check to see if the filtering parameter was sent. If it is then use it to adda. where condition (assuming you are using a SQL like db) to the query.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren Here I tried using your example and by sending 'id' as parameter in the ajax request of scadapoints.php page. But I am not getting any data not sure why. I checked dev tool as well but no errors in dev tool. I know its not complete solution yet but I tried below code. I am getting popup modal but not data.

         <input type="hidden" id='role' value="<?php echo $role ?>">
    
            <div class="container-fluid ms-7 w-auto">
              <div class="card">
                <div class="card-body">
                  <div id='phaseTable' class='content'>
                    <table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
                      <thead>
                        <tr>
                            <th class='text-center'>ID</th>
                          <th class='text-center'>Drawing ID</th>
                          <th class='text-center'>Spec Tag</th>
                          <th class='text-center'>Location</th>
                          <th class='text-center'>Building</th>
                          <th class='text-center'>Room</th>
                          <th class='text-center'>Level</th>
                          <th class='text-center'>Type</th>
                          <th class='text-center'>Entity</th>
                          <th class='text-center'>Design</th>
                          <th class='text-center'>Status</th>
                          <th class='text-center'>Old ID</th>
                          <th class='text-center'>PICO Status</th>
                          <th class='text-center'>SAT Status</th>
                          <th class='text-center'>Subsystem</th>
                          <th class='text-center'>Discipline</th>
                          <th class='text-center'>PICO</th>
                          <th class='text-center'>SAT</th>
                          <th class='text-center'>SCADA Points</th>
                          <th class='text-center'>BIC</th>
                          <th class='text-center'>Phase</th>
                          <th class='text-center'>Seq</th>
                          <th class='text-center'>Comments</th>
                        </tr>
                      </thead>
    
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="modal fade scadamodal" tabindex="-1" role="dialog" aria-labelledby="scadamodal" aria-hidden="true" id="scadamodal">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="scadaModalLabel">SCADA Points</h4>
                        </div>
                    </div>
                </div>   
            </div> -->
    
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>    <meta charset=utf-8 />
            <div class="modal fade" id="myModal">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      </div>
                      <div class="modal-body">
                        <table  id="modal_table" class="table table-striped">
                          <thead>
                            <tr>
                                <th>Loop No</th>
                                <th>Scada Tag</th>
                            </tr>
                          </thead>
                        </table>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
                      </div>
    
                    </div>
                  </div>
                </div>
    
            var table = $('#assyntCx_Table').DataTable( {
                dom: 'lBfrtip',
    
                serverSide: true,
                processing: true,
                ajax: {
                  url: "../ajax/at/assets_ss.php",
                  type: "POST",
                  deferRender: true,
    
                },
    
                //TABLE WINDOW
                scrollY:        "65vh",
                scrollX:        true,
                scrollCollapse: true,
                paging:         true,
                fixedColumns:   {
                  left: 2
                },
    
    
                    columns: [
                  { data: "id" },
                  { data: "designTag",    className: "dt-nowrap", },
                  { data: "specTag",      className: "dt-nowrap", },
                  { data: "loc",          className: "dt-nowrap", },
                  { data: "building",     className: "dt-nowrap", },
                  { data: "room",         className: "dt-nowrap editable", },
                  { data: "level",        className: "dt-nowrap editable", editField: "A.levels", },
                  { data: "assetType",    className: "dt-nowrap editable", editField: "A.assetType",},
                  { data: "entity",       className: "dt-nowrap editable", editField: "A.entity",},
                  { data: "design",       className: "dt-nowrap editable", },
                  { data: "assetStatus",  className: "dt-nowrap editable", editField: "A.assetStatus", },
                  { data: "oldID",        className: "dt-nowrap editable", },
                  { data: "PR",           className: "dt-nowrap", },
                  { data: "SR",           className: "dt-nowrap", },
                  { data: "subsystem",    className: "dt-nowrap", },
                  { data: "discipline",   className: "dt-nowrap", },
                  { data: "PICO",         className: "dt-nowrap", },
                  { data: "SAT",          className: "dt-nowrap", },
    
            // Link to open Modal
             { data: "scadaPoints",          
                    className: "dt-nowrap dt-center", 
                    render: function ( data, type, row) {
                        if ( type === 'display' || type === 'filter' ) {
                        if(data != "0"){
                            return '<a href="#myModal" data-toggle="modal" data-target="#myModal" data-id="'+row.id+'">'+data+'</a>';
    
                        }else{
                            return '';
                        }
                        //../asset/scadapoints.php?assetID='+row.id+'
                    }
                    if(data != "0"){
                        return data;
                    }
                    else{
                        return '';
                    }
    
                    //return '<button class="btn btn-primary" data-toggle="modal" data-loc="'+row.loc+'" data-target="#myModal">'+data+'</button>';
                    }
                },
                  { data: "U.username",   className: "dt-nowrap editable", editField: "A.bic",},
                  { data: "assetPhase",   className: "dt-nowrap editable", editField: "A.phase",},
                  { data: "seq",          className: "dt-nowrap editable", },
                  { data: "comment",      className: "editable", },
                    ],
    
                //SHOW SELECTION & SAVE PREVIOUS STATE
                select: true,
                stateSave: false,
    
                //DISABLE AUTOWIDTH
                "autoWidth" : false,
    
    
                //PAGINATION OPTIONS
                pageLength: 250,
                lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],
                columnDefs: [
                         { "visible": false,  "targets": [ 0 ] }
                     ],
    
    
              } );
    
    
              // SCADA MODAL
              $("#myModal").on('show.bs.modal', function (e) {
    
                var triggerLink = $(e.relatedTarget);
                var id = triggerLink.data("id");
    
                //$("modalTitle").text(title);
                //$(this).find(".modal-body").html("<h5>id: "+id+"</h5>");
    
                $('#modal_table').DataTable({
                  destroy: true,
    
                  ajax: {
    
    // I used server side script url and used columns from that table , please correct me if I am wrong here
    
                    url: ".../ajax/at/scadapoints.php?assetID='+row.id+'",
                    data: function ( d ) {
                      d.id = id;
                    }
                 },
                  columns: [
                    //{ "data": "id" },
                     { data: "A.loopNo" },
                     { data: "A.scadaTag" },
    
                  ]
    
                });
            });
    

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    Use the browser's network inspector to see what is sent in the XHR request and what the response is. You should see an XHR request sent when the modal is open. If there is no data returned then you will need to debug your server script scadapoints.php.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren Hello Kevin, thank you so much for your help. I found the error and now I am getting data. But now when ever I clicked on link instead of giving information of that specific asset, its giving me whole list of scadapoints.

    you said something about where clause and sql query. Can you explain little more ?

    Here is my code and what I am getting in response on website.

            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>    <meta charset=utf-8 />
    
            <div class="modal fade" id="myModal">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      </div>
                      <div class="modal-body">
                        <table  id="modal_table" class="table table-striped">
                          <thead>
                            <tr>
                                <th>Loop Number</th>
                                <th>SCADA Tag</th>
                                <th>Service Description</th>
                                <th>PLC ID</th>
                                <th>Field End Terminated</th>
                                <th>Marshalling Panel Terminated</th>
                            </tr>
                          </thead>
                        </table>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
                      </div>
    
                    </div>
                  </div>
                </div>
    
    
    
    
    
            columns: [
                  { data: "id" },
                  { data: "designTag",    className: "dt-nowrap", },
                  { data: "specTag",      className: "dt-nowrap", },
                  { data: "loc",          className: "dt-nowrap", },
                  { data: "building",     className: "dt-nowrap", },
                  { data: "room",         className: "dt-nowrap editable", },
                  { data: "level",        className: "dt-nowrap editable", editField: "A.levels", },
                  { data: "assetType",    className: "dt-nowrap editable", editField: "A.assetType",},
                  { data: "entity",       className: "dt-nowrap editable", editField: "A.entity",},
                  { data: "design",       className: "dt-nowrap editable", },
                  { data: "assetStatus",  className: "dt-nowrap editable", editField: "A.assetStatus", },
                  { data: "oldID",        className: "dt-nowrap editable", },
                  { data: "PR",           className: "dt-nowrap", },
                  { data: "SR",           className: "dt-nowrap", },
                  { data: "subsystem",    className: "dt-nowrap", },
                  { data: "discipline",   className: "dt-nowrap", },
                  { data: "PICO",         className: "dt-nowrap", },
                  { data: "SAT",          className: "dt-nowrap", },
    
    
    
                  { data: "scadaPoints",          
                    className: "dt-nowrap dt-center", 
                    render: function ( data, type, row) {
    
                        if(data != "0"){
    
                            return '<a href="#myModal" data-toggle="modal" data-target="#myModal" data-id="'+row.id+'">'+data+'</a>';
                            //return '<a href="../asset/scadapoints.php?assetID='+row.id+'">'+data+'</a>';
    
                        }else{
                            return '';
                        }
    
                    },
                },
                  { data: "U.username",   className: "dt-nowrap editable", editField: "A.bic",},
                  { data: "assetPhase",   className: "dt-nowrap editable", editField: "A.phase",},
                  { data: "seq",          className: "dt-nowrap editable", },
                  { data: "comment",      className: "editable", },
                    ],
    
    
    
            // SCADA MODAL
            $("#myModal").on('show.bs.modal', function (e) {
    
                var triggerLink = $(e.relatedTarget);
                var id = triggerLink.data("id");
    
    
                $('#modal_table').DataTable({
                  destroy: true,
    
                  ajax: {
                    url: "../ajax/at/scadapoints.php",
                    //url: "../ajax/at/assets_ss.php?assetID='+row.id+'",
                    data: function ( d ) {
                      d.id = id;
                    }
                 },
                  columns: [
                    //{ "data": "id" },
    
                     { data: "A.loopNo" },
                     { data: "A.scadaTag" },
                     { data: "status" },
                     { data: "A.plcID" },
                     { data: "FTerminated" },
                     { data: "MPTerminated" },
    
    
                  ]
    
                });
            });
    

    When I click to the link it should only give this specific asset's information.

    but when I click it displays other asset's information too ( Marked in Blue which should not display) and only display last one.. which is the asset which I clicked ( Marked with Red ).

  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin
    Answer ✓

    In ../ajax/at/scadapoints.php you will have something querying the database. What is that? Whatever it is, it will need to take into account $_GET['id'] and apply that as the WHERE condition.

    Allan

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    Thank you @allan Yes I figure it out yesterday. Thank you so much.

Sign In or Register to comment.