JavaScript Issue in table sorting inside expandable table in codeigniter

I want to sort my table data in expandable table view, so I tried the below code:

Code Link

and my view is as in the below image enter image description here

When I use this code and put in my site, it is not working in this type of view like expandable table view. The sorting is not being performed in the expandable table view. Any idea how can I make it work?

EDIT

stupidtable.js

// Stupid jQuery table plugin.

 (function($) {
 $.fn.stupidtable = function(sortFns) {
 return this.each(function() {
  var $table = $(this);
  sortFns = sortFns || {};
  sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
  $table.data('sortFns', sortFns);

  $table.on("click.stupidtable", "thead th", function() {
      $(this).stupidsort();
   });
  });
};


 // Expects $("#mytable").stupidtable() to have already been called.
 // Call on a table header.
 $.fn.stupidsort = function(force_direction){
 var $this_th = $(this);
 var th_index = 0; // we'll increment this soon
 var dir = $.fn.stupidtable.dir;
 var $table = $this_th.closest("table");
 var datatype = $this_th.data("sort") || null;

 // No datatype? Nothing to do.
 if (datatype === null) {
  return;
 }

// Account for colspans
$this_th.parents("tr").find("th").slice(0, $(this).index()).each(function()       {
  var cols = $(this).attr("colspan") || 1;
  th_index += parseInt(cols,10);
});

var sort_dir;
if(arguments.length == 1){
    sort_dir = force_direction;
}
else{
    sort_dir = force_direction || $this_th.data("sort-default") || dir.ASC;
    if ($this_th.data("sort-dir"))
       sort_dir = $this_th.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC;
}


$table.trigger("beforetablesort", {column: th_index, direction: sort_dir});

// More reliable method of forcing a redraw
$table.css("display");

// Run sorting asynchronously on a timout to force browser redraw after
// `beforetablesort` callback. Also avoids locking up the browser too much.
setTimeout(function() {
  // Gather the elements for this column
  var column = [];
  var sortFns = $table.data('sortFns');
  var sortMethod = sortFns[datatype];
  var trs = $table.children("tbody").children("tr");

  // Extract the data for the column that needs to be sorted and pair it up
  // with the TR itself into a tuple. This way sorting the values will
  // incidentally sort the trs.
  trs.each(function(index,tr) {
    var $e = $(tr).children().eq(th_index);
    var sort_val = $e.data("sort-value");

    // Store and read from the .data cache for display text only sorts
    // instead of looking through the DOM every time
    if(typeof(sort_val) === "undefined"){
      var txt = $e.text();
      $e.data('sort-value', txt);
      sort_val = txt;
    }
    column.push([sort_val, tr]);
  });

  // Sort by the data-order-by value
  column.sort(function(a, b) { return sortMethod(a[0], b[0]); });
  if (sort_dir != dir.ASC)
    column.reverse();

  // Replace the content of tbody with the sorted rows. Strangely
  // enough, .append accomplishes this for us.
  trs = $.map(column, function(kv) { return kv[1]; });
  $table.children("tbody").append(trs);

  // Reset siblings
  $table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc");
  $this_th.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir);

  $table.trigger("aftertablesort", {column: th_index, direction: sort_dir});
  $table.css("display");
}, 10);

return $this_th;
 };

  // Call on a sortable td to update its value in the sort. This should be the
  // only mechanism used to update a cell's sort value. If your display value is
 // different from your sort value, use jQuery's .text() or .html() to update
 // the td contents, Assumes stupidtable has already been called for the table.
 $.fn.updateSortVal = function(new_sort_val){
 var $this_td = $(this);
 if($this_td.is('[data-sort-value]')){
  // For visual consistency with the .data cache
  $this_td.attr('data-sort-value', new_sort_val);
  }
 $this_td.data("sort-value", new_sort_val);
 return $this_td;
};

 // ------------------------------------------------------------------
  // Default settings
 // ------------------------------------------------------------------
 $.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"};
 $.fn.stupidtable.default_sort_fns = {
"int": function(a, b) {
  return parseInt(a, 10) - parseInt(b, 10);
},
"float": function(a, b) {
  return parseFloat(a) - parseFloat(b);
},
 "string": function(a, b) {
  return a.localeCompare(b);
}, 
"string-ins": function(a, b) {
  a = a.toLocaleLowerCase();
  b = b.toLocaleLowerCase();
  return a.localeCompare(b);
 }
 };
 })(jQuery);

my Script code

 <script>
$(function(){
    // Helper function to convert a string of the form "Mar 15, 1987" into a Date object.
    var date_from_string = function(str) {
      var months = ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];
      var pattern = "^([a-zA-Z]{3})\\s*(\\d{1,2}),\\s*(\\d{4})$";
      var re = new RegExp(pattern);
      var DateParts = re.exec(str).slice(1);

      var Year = DateParts[2];
      var Month = $.inArray(DateParts[0].toLowerCase(), months);
      var Day = DateParts[1];

      return new Date(Year, Month, Day);
    }

    var table = $("table").stupidtable({
      "date": function(a,b) {
        // Get these into date objects for comparison.
        aDate = date_from_string(angel);
        bDate = date_from_string(beer);
        return aDate - bDate;
      }
    });

    table.on("beforetablesort", function (event, data) {
      // Apply a "disabled" look to the table while sorting.
      // Using addClass for "testing" as it takes slightly longer to render.
      $("#msg").text("Sorting...");
      $("table").addClass("disabled");
    });

    table.on("aftertablesort", function (event, data) {
      // Reset loading message.
      $("#msg").html("&nbsp;");
      $("table").removeClass("disabled");

      var th = $(this).find("th");
      th.find(".arrow").remove();
      var dir = $.fn.stupidtable.dir;

      var arrow = data.direction === dir.ASC ? "&uarr;" : "&darr;";
      th.eq(data.column).append('<span class="arrow">' + arrow +'</span>');
    });
  });
</script>

When I run the above code and expand my view, in my stupidtable.js file there is code like

"string": function(a, b) {
  return a.localeCompare(b);
},  

In this code a.localeCompare(b); is getting null in expandable table view so it is not sorting well, and I also want sorting inside the data which table is expanded. Any idea how I can solve this issue?

html code

<table id="property" class="hometable table-bordered">
                      <thead>
                        <tr>
                          <th >#</th>
                          <th  >Image</th>
                          <th width="12%" >
                            <a target='_blank' href="<?php echo base_url();?>property/propertylist?field=p_name&sort_by=<?php echo $sort;?>">
                              Property Name &nbsp;
                              <? if($sort == 'ASC' && $_GET['field']=='p_name') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC'&& $_GET['field']=='p_name') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>';  } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
                            </a>
                          </th>
                          <th >Address</th>
                          <th >
                            <a target='_blank' href="<?php echo base_url();?>property/propertylist?field=p_city&sort_by=<?php echo $sort;?>">
                              City &nbsp;
                              <? if($sort == 'ASC' && $_GET['field']=='p_city') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='p_city') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>';  } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
                            </a>
                          </th>
                          <th >
                            <a target='_blank' href="<?php echo base_url();?>property/propertylist?field=p_state&sort_by=<?php echo $sort;?>">
                              State &nbsp;
                              <? if($sort == 'ASC' && $_GET['field']=='p_state') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='p_state') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>';  } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
                            </a>
                          </th>
                          <th width="9%" >
                            <a target='_blank' href="<?php echo base_url();?>property/propertylist?field=p_country&sort_by=<?php echo $sort;?>">
                              Country &nbsp;
                              <? if($sort == 'ASC' && $_GET['field']=='p_country') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='p_country') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>';  } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
                            </a>
                          </th>
                          <th >Zipcode</th>
                          <th colspan="2" >
                            <a target='_blank' href="<?php echo base_url();?>property/propertylist?field=unit_type&sort_by=<?php echo $sort;?>">
                              Property Type &nbsp;
                              <? if($sort == 'ASC' && $_GET['field']=='unit_type') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='unit_type') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>';  } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
                            </a>
                          </th>
                          <th >Tenants</th>
                          <? if(!empty($query1)){?>
                          <th >Edit </th>
                          <th >Copy </th>
                          <th >Delete </th>
                          <? } else {?>
                          <th >Edit </th>
                          <th >Copy</th>
                          <th >Delete</th>
                          <? } ?>
                        </tr>
                      </thead>
                      <?  if(empty($detail)) {  ?>
                      <tr>
                        <td colspan="14">
                          <div class="tblalert alert-danger"><!--<button class="close" data-close="alert"></button>--><span>No property available.</span></div>
                        </td>
                      </tr>
                      <?php }else {
            $i = 0;
            foreach($detail as $pro) {  

                    $i++;
        ?>
                      <tr id="trarrow<? echo $i;?>">
                        <? $admindata = $this->session->userdata('id');
     $query = $this->db->query('SELECT r_country,amt_format FROM register where id="'.$admindata.'"');
              foreach ($query->result() as $row)
              {     $currency = $row->r_country ;
                    $amt_format = $row->amt_format ;
              }
               $curren = $this->db->query('SELECT * FROM country where id="'.$currency.'"');
              foreach ($curren->result() as $row)
              {     $curr = $row->currency ;

              }

              $unit = $this->db->query("SELECT * FROM property_unit WHERE p_id = '".$pro['p_id']."'");
              $unitid = count($unit->result_array());
       ?>
                        <?php /*?><?php if($pro['unit_type'] == '0'){ ?>
       <td align="center"   style="cursor:pointer"><div class="arrow" id="arimg<?php  echo $i?>"></div></td>
       <? } else {?>
                     <td align="center" id="arrow<?php  echo $i?>" onClick="trshow(<?php  echo $i?>);" style="cursor:pointer"><div class="arrow" id="arimg<?php  echo $i?>"></div></td>

         <? } ?><?php */?>
                        <td><?php echo $i; ?></td>
                        <td align="center">
                          <?  if(!empty($pro['p_path'])) {  ?>
                          <a class="fancybox fancyboxiframe" target='_blank' href="<?php echo base_url('property/popup/'.$pro['p_id']);?>">
                            <img class="img-polaroid" src="http://worldofrental.s3.amazonaws.com/<? echo $pro['p_path'];?>" alt="Please Upload Image" width="50" height="50">
                            <? } else {?>
                            <img class="img-polaroid" src=<? echo base_url('upload/tenants/app_logo.png');?> alt="Upload Image" width="50" height="50">
                            <? } 


               ?>
                          </a>
                        </td>
                        <td >
                          <a target='_blank' href="<? echo base_url('property/propertyedit/'.$pro['p_id']);?>">
                            <?php echo $pro['p_name']; ?>
                          </a>
                        </td>
                        <td ><?php echo $pro['p_address']; ?></td>
                        <td><?php echo $pro['p_city']; ?></td>
                        <td>
                          <?php $statename =  $this->db->query("SELECT state_name FROM state WHERE state_id = '".$pro['p_state']."'"); $state_name = $statename->result_array(); echo $state_name[0]['state_name']; ?>
                        </td>
                        <td ><?php echo $pro['name']; ?></td>
                        <td><?php echo $pro['p_zipcode']; ?></td>
                        <?php if($pro['unit_type'] == '0'){ ?>
                        <td style="border-right:solid 0px !important; "></td>
                        <td align="right" style="border-left:solid 0px !important; "><?php echo 'Single Unit'; ?></td>
                        <? } else {?>
                        <td style="border-right:solid 0px !important; cursor:pointer; " id="arrow<?php  echo $i?>" onClick="trshow(<?php  echo $i?>);" >
                          <div class="arrow" id="arimg<?php  echo $i?>"></div>
                        </td>
                        <td align="right" style="cursor:pointer; border-left:solid 0px !important; " id="arrow<?php  echo $i?>" onClick="trshow(<?php  echo $i?>);" >
                          <div id="arimg<?php  echo $i?>"></div>
                          <a class="btn default btn-xs blue" >
                            <? echo 'Multi Unit' .'&nbsp;'.'('.$unitid.')';?>
                          </a>
                          <? } ?>
                          </a>
                        </td>
                        <td>
                          <a class="btn default btn-xs yellow" data-toggle="modal" onClick="Viewtenants(<? echo $pro['p_id'];?>); return false;" title="View Tenants" target='_blank' href="#myproperty-<? echo $pro['p_id'];?>">
                            View Tenants
                          </a>
                        </td>
                        <div id="myproperty-<? echo $pro['p_id'];?>" class="modal fade"></div>
                        <? if(!empty($query1)){?>
                        <td>
                          <a class="btn blue disabled" title="your service has been canceled" target='_blank' href="<?php echo base_url('property/propertyedit/'.$pro['p_id']);?>">
                            <i class="fa fa-edit"></i> Edit
                          </a>
                        </td>
                        <div id="myModal-<? //echo $pro->pid;?>" class="modal fade"></div>
                        <td>
                          <a class="btn green disabled" title="your service has been canceled" target='_blank' href="<?php echo base_url('property/copydata/'.$pro['p_id']);?>">
                            <i class="fa fa-copy"></i> Copy
                          </a>
                        </td>
                        <!--<td class="status" align="center"><a style="cursor:pointer" title="Trash" onClick="CheckUsername(<? echo $pro['p_id'];?>); return false;" id="status">
              <div id="status-<? echo $pro['p_id'];?>"> 
                                </div>  <i class="fa fa-trash-o"></i> Trash</a></td>-->
                        <td>
                          <a class="delete btn red disabled btn-xs black delete-confirm" delete-url="<?php echo base_url('property/status_change/'.$pro['p_id']);?>" data-confirm="Are you sure you want to trash this property?" title="your service has been canceled">
                            <i class="fa fa-trash-o"></i> Delete
                          </a>
                        </td>
                        <? } else {?>
                        <td>
                          <a  class="btn default btn-xs blue" title="Edit/View" target='_blank' href="<?php echo base_url('property/propertyedit/'.$pro['p_id']);?>">
                            <i class="fa fa-edit"></i> Edit
                          </a>
                        </td>
                        <div id="myModal-<? //echo $pro->pid;?>" class="modal fade"></div>
                        <td align="center">
                          <a class="btn default btn-xs green" title="Edit/View" target='_blank' href="<?php echo base_url('property/copydata/'.$pro['p_id']);?>">
                            <i class="fa fa-copy"></i> Copy
                          </a>
                        </td>
                        <td>
                          <a class="btn red" data-toggle="modal" onClick="ViewStore(<? echo $pro['p_id'];?>); return false;" title="Delete" target='_blank' href="#myModal-<? echo $pro['p_id'];?>">
                            <i class="fa fa-trash-o"></i>
                            <font size="-1"> Delete</font>
                          </a>
                        </td>
                        <div id="myModal-<? echo $pro['p_id'];?>" class="modal fade"></div>
                        <? } ?>
                      </tr>
                      <tr id="subtr<?php echo $i; ?>">
                        <td colspan="14">
                          <? $unit_info = $this->db->query("SELECT * FROM unit_info WHERE p_id = '".$pro['p_id']."' AND isactive = '0' AND unit_id <> '0'");
                            $result = $unit_info->result_array();
                            ?>
                          <? if(empty($result)) {?>
                          <? }else{ ?>
                          <div class="propertyreport-box">
                            <div class="title">Property Units</div>
                            <ul class="finacial-list">
                              <li><strong>Unit Name</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <? $unitname = $this->db->query("SELECT unit_name FROM property_unit WHERE unit_id = '".$unit->unit_id."'"); $unit_name = $unitname->result_array();   echo $unit_name[0]['unit_name'] ;?>
                                </span></li>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Rent </strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <? if(!empty($unit->p_rent)){ echo $curr.' '.$unit->p_rent;}else { echo $curr.' '.'0.00';}?>
                                </span></li>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Bedrooms</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <? if(!empty($unit->p_bedroom)){ echo $unit->p_bedroom; }else { echo '0.0';}?>
                                </span></li>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Bathrooms</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <? if(!empty($unit->p_bathroom)){ echo $unit->p_bathroom; }else { echo '0.0';}?>
                                </span></li>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Sq. Ft</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <? if(!empty($unit->p_size)){ echo $unit->p_size; }else { echo '0.00';}?>
                                </span></li>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Rented</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span><? echo $unit->p_isrent;?></span></li>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Tenants</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <a class="btn btn-xs yellow" data-toggle="modal" onClick="viewunittenants(<? echo $unit->unit_info_id;?>); return false;" title="Delete" target='_blank' href="#myproperty-<? echo $unit->unit_info_id;?>">
                                  <font size="-2"> View Tenants</font>
                                </a>
                                </span></li>
                              <div id="myproperty-<? echo $unit->unit_info_id;?>" class="modal fade "></div>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Edit</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <a class="btn btn-xs yellow" title="Edit/View" target='_blank' href="<?php echo base_url('unit/unitedit/'.$unit->unit_info_id);?>">
                                  <i class="fa fa-edit"></i>
                                  <font size="-2"> Edit</font>
                                </a>
                                </span></li>
                              <? } ?>
                            </ul>
                            <ul class="finacial-list">
                              <li><strong>Delete</strong></li>
                              <? foreach($unit_info->result() as $unit){?>
                              <li><span>
                                <a class="btn btn-xs dark" data-toggle="modal" onClick="ViewStore1(<? echo $unit->unit_info_id;?>); return false;" title="Delete" target='_blank' href="#myModal1-<? echo $unit->unit_info_id;?>">
                                  <i class="fa fa-trash-o"></i>
                                  <font size="-2"> Delete</font>
                                </a>
                                </span></li>
                              <div id="myModal1-<? echo $unit->unit_info_id;?>" class="modal fade "></div>
                              <? } ?>
                            </ul>
                          </div>
                          <? } ?>
                        </td>
                      </tr>
                      <?php
} }
?>
                    </table>
Answer:1

With PhantomJS, I want to gather perfomance timing on page load time. I test this 2 methods for gathering metrics Setting own timing var page = require('webpage').create(); var system = ...

With PhantomJS, I want to gather perfomance timing on page load time. I test this 2 methods for gathering metrics Setting own timing var page = require('webpage').create(); var system = ...

I have a jqgrid and the first column I have a checkbox (checkAll others checkbox). I don't know how i do it. How I do a function to select all others checkbox in my jqgrid? $.getJSON("/Page/Table", ...

I have a jqgrid and the first column I have a checkbox (checkAll others checkbox). I don't know how i do it. How I do a function to select all others checkbox in my jqgrid? $.getJSON("/Page/Table", ...

  1. function select all checkbox
  2. select checkbox function

i'm trying to make a popup to draggable. does anyone help me how to do that, here is my code http://jsfiddle.net/Ur5Xn/38/ $(document).ready(function(){ function showAlertBox(){ $("#alert"...

i'm trying to make a popup to draggable. does anyone help me how to do that, here is my code http://jsfiddle.net/Ur5Xn/38/ $(document).ready(function(){ function showAlertBox(){ $("#alert"...

  1. make modal popup draggable jquery
  2. make modal popup draggable

I'm having issues with my NavigationUrl, basically if I wasn't storing the web address in the web config file this would be easy but it doesn't appear that you can call appSettings:SFL in line, does ...

I'm having issues with my NavigationUrl, basically if I wasn't storing the web address in the web config file this would be easy but it doesn't appear that you can call appSettings:SFL in line, does ...