Datatable Sorting arrows are not working

Sorting arrows are not working

Open BasmaNabil opened this issue 7 years ago • 0 comments

I have a modal that contains search button, when the user opens the modal and click search button, it calls an ajax to get data from the database in PHP page, it returns the data in table that will be loaded in ajax return success, I am using DataTable plugin to sort this table, but it isn't working,I may be missing something or put the function in wrong place,can anyone help me in that? HTML part

  <link href="../lib/css/theme.default.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script> 
  <script type="text/javascript">
    $(function () 
      {
         $('#modal-3').on('shown.bs.modal', function (e) { 
            $('#SearchResults').tablesorter({
              widgets        : ['zebra', 'columns'],
              usNumberFormat : false,
              sortReset      : true,
              sortRestart    : true
           });
         })
      });
    </script>
  <body>
  <div class="modal fade" id="modal-3">
  <div class="modal-body"> 
    <div class="row">
      <table id="SearchResults" class="tablesorter" style="width:auto;"></table> 
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-success btn-md" style="margin:0;width: 75px;" onclick="SearchOrders()">Search</button>
  </div>
 </div>
</body>
</html>

Php page

      <?php

       include_once "connect.php";

       $output='';

       $bool_is_data_saved = false;

       $SDate=date('Y-m-d',strtotime($_POST["StartDate"]));
       $EDate=date('Y-m-d',strtotime($_POST["EndDate"]));

      $stmt ="SELECT DISTINCT Order_ID,Customer_ID,Required_Date,Delivery_Date,Order_Status FROM Orders where Required_Date between '".$SDate."' and '".$EDate."'";

      $row = $conn->query($stmt)->fetchall(PDO::FETCH_ASSOC);
      if (count($row) > 0)
      {
         $output.='<thead>
                <tr>
                    <th>Order No.</th>
                    <th >Customer Name</th>
                    <th>Order Date</th>
                    <th>Category Name</th>
                    <th>Category Type</th>
                    <th>Quantity in Kilos</th>
                    <th>Delivery Date</th>
                    <th>Order Status</th>
                </tr>
                </thead>
         ';
          foreach ($conn->query($stmt) as $rows) 
         {
         //Getting Customer Name
         $sql="SELECT first_name_,last_name_ FROM Customers where Cust_id='".$rows["Customer_ID"]."'";
         $result=$conn->query($sql)->fetch(PDO::FETCH_ASSOC);

        //Getting Order Data
        $query="SELECT distinct Order_ID,Category_ID,Product_ID,Amount FROM Order_Product where Order_ID='".$rows["Order_ID"]."'";

        foreach ($conn->query($query) as $results) 
        {
            $newsql="SELECT Category_Name from Categories where Category_ID='".$results['Category_ID']."'";
            $newresult=$conn->query($newsql)->fetch(PDO::FETCH_ASSOC);
            $CatName=$newresult['Category_Name'];

            $newsql="SELECT Product_Name from Products where Product_ID='".$results['Product_ID']."'";
            $newresult=$conn->query($newsql)->fetch(PDO::FETCH_ASSOC);
            $ProName=$newresult['Product_Name'];

            $output.='
            <tbody>
            <tr>
                <td>'.$rows['Order_ID'].'</td>
                <td>'.$result['first_name_'].' '.$result['last_name_'].'</td>
                <td>'.$rows['Required_Date'].'</td>
                <td>'.$CatName.'</td>
                <td>'.$ProName.'</td>
                <td>'.$results['Amount'].'</td>
                <td>'.$rows['Delivery_Date'].'</td>                
            ';
            $stmt = "SELECT distinct Status_ID,Status_Name FROM Order_Status WHERE Status_Name !='".$rows['Order_Status']."'";

            $output.='<td>';
            $output .= '<select name="comboBox" style="width: 100%;color: #ffffff;background-color: rgb(16,29,73);">';
            $output .= '<option value="'.$rows['Order_Status'] .'">'.$rows['Order_Status'].'</option>';

            foreach ($conn->query($stmt) as $res) 
            {  
                $output .= '<option value="'.$res['Status_ID'] .'">'.$res['Status_Name'].'</option>';    
            }
            $output .= '</select>';
                $output .= '</td>';
                $output .='</tr>';
        }
    }

    $output.='</tbody>';
    $bool_is_data_saved = true;
    echo $output;
    }

    if(!$bool_is_data_saved)
    {
       echo ("Failed");
    }
  ?>

SearchOrders Function `

  function SearchOrders()

    {

	document.getElementById("SearchResults").innerHTML="";

	document.getElementById("NoData").innerHTML="";

	document.getElementById("Results").style.display = 'none';

	startDate=document.getElementById("Start_Date").value;

	endDate=document.getElementById("End_Date").value;

	$.ajax({
		type:"POST",
		url:"searchorders.php",
		data:
			{ 
		       'StartDate': startDate, 
		       'EndDate':endDate
	      	},
		success: function(data)
		{
			if (data == "Failed")
			{
				$('#NoData').append("No data Found!");
			}
			else
			{
				$('#SearchResults').append(data);
				document.getElementById("Results").style.display = 'block';
                                    $('#SearchResults').DataTable({"columnDefs": [ {
                   "targets": [0,4,5,6],
                    "orderable": false
                  }]});
	
			}
		}
	})
}`

Oct 03 '17 08:10 BasmaNabil

Datatable Datatable copied to clipboard

Sorting arrows are not working

Datatable
Datatable copied to clipboard