title: How to give different row id's for two different variables in the same table, one for folders and the other for medias?
body: <p>I need some help plz!!<br>
  I need to give each variable an id to use it later to make an ajax click on method action to enter the $folder subdirectory's inside the table.
  Do I have to do that in the controller or in the ajax?<br>
  The data tables plugin is used in the application: <a href="https://datatables.net/" rel="nofollow noreferrer">https://datatables.net/</a>  </p>
  
  <p>// These are the three functions: Controller function, Ajax function, and Bootstrap, as you can see the folders at the top of the table then the medias will be listed, I am not having any problem with the code and its working fine.</p>
  
  <pre><code>public function ajaxSearchMedias() {
          $this-&gt;checkAccessPlaylists(false) ;
  
          $this-&gt;loadModelSpe('Media');
          $this-&gt;loadModelSpe('media');
  
          $orderby = 'name' ;
          $orderway = 'ASC' ;
          $search = NULL ;
  
          if(isset($_POST['order'][0]["column"])) {
              $column_to_order = (int) $_POST['order'][0]["column"] ;
              if($column_to_order == 2)
                  $orderby = 'length' ;   
          }
  
          if(isset($_POST['order'][0]["dir"])) {
              $way_to_order = $_POST['order'][0]["dir"] ;
              if(strtolower($way_to_order) == 'desc')
                  $orderway = 'DESC' ;    
          }
  
          if($_POST['search']["value"]) 
              $search = $_POST['search']["value"] ;
  
          $data = array();
  
          // Display folders in the content playlists
  
          if(isset($_POST['folderId']) &amp;&amp; $_POST['folderId'] != -1) {
                  $level = $this-&gt;media-&gt;getFolderLevel($_POST['folderId'])-&gt;level;
                  $level++;
                  $parentFolder = $_POST['folderId'];
                  $folders = $this-&gt;media-&gt;getFoldersByParentFolderId($_POST['folderId']);
                  $medias = $this-&gt;media-&gt;getMediasByParentFolderId($_POST['folderId']);
          }else {
                  $siteId = $_SESSION["sess_id_site"];
                  $folders = $this-&gt;media-&gt;getRootFoldersBySiteId($siteId);
                  $medias = $this-&gt;media-&gt;getRootMediasBySiteId($siteId);
          }
          if($folders) {
              foreach ($folders as $folder){
                  //$name = $newtext = wordwrap( $one_media-&gt;name, 15, "\n", true );
                  $name = $folder-&gt;name;
                  $name = '&lt;span&gt;'.$name.'&lt;/span&gt;';
  
                  $unformatted_length = Helper::getLengthForMedia(array("type" =&gt; $folder-&gt;type)) ;
  
                  $length = Helper::convertSecondsToMinutesSeconds($unformatted_length) ;
  
                  $orientation_and_type_icon = '&lt;div class="" data-name="'.htmlspecialchars($folder-&gt;name, ENT_QUOTES, 'UTF-8').'" data-length="'.$length.'"  data-unformatted_length="'.$unformatted_length.'" data-id="'.$one_media-&gt;id.'"  data-type="media"  &gt;' ;
                  $orientation_and_type_icon .= '&lt;span class="icon"&gt;'.Helper::getIconForTypeAndOrientationForMedia($folder).'&lt;/span&gt;' ;
                  $orientation_and_type_icon .= '&lt;span class="thumbnail" style="display:none;"&gt;'.Helper::getThumbnailForMedia($folder, $this-&gt;current_id_company, $this-&gt;current_id_site, "img-thumbnail").'&lt;/span&gt;' ;
                  $orientation_and_type_icon .= '&lt;button type="button" id="'.$folder-&gt;name.'" &gt; &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;' ;
                  $orientation_and_type_icon .= '&lt;/div&gt;' ;
  
                  array_push($data, array('orientation_and_type_icon' =&gt; $orientation_and_type_icon, 'name' =&gt; $name, 'length' =&gt; $length));
              }
          }
  
          // Display Medias in the content playlist
  
          $medias = $this-&gt;Media-&gt;getMediasForContentPlaylists($search, $orderby, $orderway, 500, $this-&gt;current_id_site, $id_folder = NULL);
  
          if($medias) {
              foreach ($medias as $one_media){
                  //$name = $newtext = wordwrap( $one_media-&gt;name, 15, "\n", true );
                  $name = $newtext = $one_media-&gt;name;
                  $name = '&lt;span&gt;'.$name.'&lt;/span&gt;';
  
                  $unformatted_length = Helper::getLengthForMedia(array("type" =&gt; $one_media-&gt;type, "length" =&gt; $one_media-&gt;length)) ;
  
                  $length = Helper::convertSecondsToMinutesSeconds($unformatted_length) ;
  
                  $orientation_and_type_icon = '&lt;div class="pl_media_data" data-name="'.htmlspecialchars($one_media-&gt;name, ENT_QUOTES, 'UTF-8').'" data-length="'.$length.'"  data-unformatted_length="'.$unformatted_length.'" data-id="'.$one_media-&gt;id.'"  data-type="media"  &gt;' ;
                  $orientation_and_type_icon .= '&lt;span class="icon"&gt;'.Helper::getIconForTypeAndOrientationForMedia($one_media).'&lt;/span&gt;' ;
                  $orientation_and_type_icon .= '&lt;span class="thumbnail" style="display:none;"&gt;'.Helper::getThumbnailForMedia($one_media, $this-&gt;current_id_company, $this-&gt;current_id_site, "img-thumbnail").'&lt;/span&gt;' ;
                  $orientation_and_type_icon .= '&lt;/div&gt;' ;
  
                  array_push($data, array('orientation_and_type_icon' =&gt; $orientation_and_type_icon, 'name' =&gt; $name, 'length' =&gt; $length));
              }
          }
  
         $json_result = json_encode(array("data" =&gt; $data));
  
          print $json_result; 
      }
  
  // This is the ajax function, this function list media's and folders using data tables plugin without any problem, the main problem is giving an id to folders different than the media's so I can use it to make the click on for the folders.
  
      this.getMediaList = function() {
          var jqxhr = $.getJSON( url + 'plugins/DataTables-1.10.12/media/js/i18n/fr_FR.json', function( data ) {});
          jqxhr.done(function(data) {
              self.pl_dt_language_json = data ;
              var languages_dt =  self.pl_dt_language_json ;
              languages_dt = $.extend(languages_dt, {"sSearch": ""});
  
              self.pl_medias_dt = $('#pl_medias').DataTable({
                  language: languages_dt,
                  "columns": [
                      { "data": "type" }, 
                      { "data": "orientation_and_type_icon" },
                      { "data": "name" },
                      { "data": "length" },
                  ], 
                  "columnDefs": [
                      { "searchable": false, "orderable": false, "targets": 0 }, 
                      { className: "pl_media_cell_type", "targets": [ 0 ] } ;
                      { className: "pl_media_cell_icon", "targets": [ 1 ] } , 
                      { className: "pl_media_cell_name", "targets": [ 2 ] } , 
                      { className: "pl_media_cell_length", "targets": [ 3 ] } 
                  ], 
                  "order": [[ 1, 'asc' ]], 
                  initComplete: function(settings, json) {
                      // search
                      if($('#pl_medias_filter input').eq(0).size() &gt; 0) {
                          $('#pl_medias_filter input').eq(0).attr("placeholder", "Rechercher un fichier") ;
                          $('#pl_medias_filter input').unbind();
                          $('#pl_medias_filter input').on( 'keyup', function () {
                              var searchInput = $(this).val();
                              if(searchInput.length == 0) {
                                  window.clearTimeout(self.pl_medias_dt_filter_status);
                                  self.pl_medias_dt.search( searchInput ).draw();
                              } else {    
                                  if(searchInput.length &lt; 3) {
                                      window.clearTimeout(self.pl_medias_dt_filter_status);
                                      self.pl_medias_dt_filter_status = setTimeout(function() {
                                          self.pl_medias_dt.search( searchInput ).draw() ;
                                      }, 3000);
                                  } else {
                                      window.clearTimeout(self.pl_medias_dt_filter_status);
                                      self.pl_medias_dt_filter_status = setTimeout(function() {
                                          self.pl_medias_dt.search( searchInput ).draw()  
                                      }, 1000);
                                  }
                              }
                          });
                      }
                  }, 
                  drawCallback: function(settings) {
                      // refresh drag and drop
                      self.initDragDropSortElementForContentPlaylist();   
                  },
                  "serverSide": true,
                  "paging":   false,
                  "lengthChange" : false,
                  "scrollY": 122, 
                  "info": false, 
                  "ajax": {
                      url : url + "playlists/ajaxSearchMedias", // json datasource
                      type: "post"
                  }, 
                  "dom": '&lt;lf&lt;t&gt;ip&gt;'
              }); 
          }); 
      },
  
  // This is the Bootstrap script
  
          &lt;div class="pl_block_wrapper pl_block_media_wrapper row"&gt;
              &lt;div class="col-xs-2 pl_block_label"&gt;&lt;span&gt;AUTOPROMO&lt;/span&gt;&lt;/div&gt;
              &lt;div class="col-xs-10 pl_block_container_middle"&gt;
                  &lt;table id="pl_medias" class="table table-striped table-bordered"  width="100%" cellspacing="0"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Type&lt;/th&gt;
                              &lt;th&gt;Nom&lt;/th&gt;
                              &lt;th&gt;Durée&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                  &lt;/table&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the three Bootstrap ajax jquery and PHP scripts.</p>