在视图页面中插入具有优先级字段的数据表,并根据优先级对表进行排序

时间:2019-02-06 10:18:10

标签: php ajax codeigniter datatable

我在datatatble中添加了列优先级,我想在查看数据时在数据表中插入优先级...当我插入优先级时,应该在数据库优先级字段中插入优先级值..当我添加优先级时,数据表应该排序根据此优先级编号,同时为每个产品添加优先级。我想在Codeigniter中使用Ajax实现此功能 任何想法我怎么能实现这个?谢谢 :) Table look like this 这是我当前的数据表代码

<html> 
   <head>  
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
   </head>  
   <body>
   <table id="displayy" class="display" style="width:100%">  
      <thead> 
      <tr>  
         <td>Product ID</td>  
         <td>Product Name</td> 
         <td>Product Description</td> 
         <td>Category</td>  
         <td>Sub Category</td> 
         <td>Image</td>
         <td>Priority</td>
      </tr>  
      </thead>
         <?php  
         foreach ($h->result() as $row)  
         {  ?>
            <tr>  
               <td><?php echo $row->p_id;?></td> 
               <td><?php echo $row->product_name;?></td>  
               <td><?php echo $row->product_des;?></td>
               <td><?php echo $row->category;?></td>
               <td><?php echo $row->subcat;?></td>

               <td><?php $imageURL = base_url().'/images/'.$row->image;?>
                    <img src="<?php echo $imageURL; ?>" alt="" width="100" height="100"  /></td>
               <td>
                  <input type="text" name="priority" id="priority">
               </td>
            </tr>  
         <?php }  ?>  
   </table>  
<script type="text/javascript">
   $(document).ready(function() {
      $('#displayy').dataTable( {
        "lengthMenu": [[3,5,8,10, 25, 50, -1], [3,5,8,10, 25, 50, "All"]]
      });
   });
</script>
</body>
</html>

3 个答案:

答案 0 :(得分:1)

您可以尝试以下解决方法:

在HTML方面:

<html> 
   <head>  
       <link rel="stylesheet" type="text/css" 
       href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"> 
 </script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

   </head>  
   <body>
   <div id="content">
   <table id="display" class="display" style="width:100%">  

        <thead> 
         <tr>  
            <td>Product ID</td>  
            <td>Product Name</td> 
            <td>Product Description</td> 
            <td>Category</td>  
            <td>Sub Category</td> 
            <td>Image</td>
            <td>Priority</td>
         </tr>  
         </thead>
         <?php  
         foreach ($h->result() as $key=>$row)  
         {  
            ?><tr>  
                <td><?php echo $row->p_id;?></td> 
            <td><?php echo $row->product_name;?></td>  
            <td><?php echo $row->product_des;?></td>
            <td><?php echo $row->category;?></td>
            <td><?php echo $row->subcat;?></td>

            <td><?php $imageURL = base_url().'/images/'.$row->image;?>
                    <img src="<?php echo $imageURL; ?>" alt="" width="100" height="100"  />
                </td>


           <td>
            <form method="POST" class="dataUpdate">
            <input type="text" name="priority" id="priority"/>
            <input type="hidden" name="pid" value="<?php echo $row->p_id;?>"/> 
            <input type="submit" value"Update" />
            </form>


           </td>

            </tr>  
         <?php }  
         ?>  
   </table> 
  </div> 

</body>
</html>

在JQuery方面:

$(document).ready(function() {    
$(".dataUpdate").on("submit", function( event ) {
    event.preventDefault();
        $.ajax({
            method: "POST",
            dataType:"html",
            url: 'test.php',
            data: $( this ).serialize(),
            success: function(data_return) {
                $("#content").empty();
                $("#content").append(data_return);            
            },
            error: function(data_return) {
                console.log(data_return); // reset after submit
            }
        });
    }
    });
});

在test.php上:

$id=$_POST['pid'];
$prior=$_POST['priority'];
mysqli_query("update your_db set priority='".$prior."' where pid='".$id."');
$getdata=mysqli_query("select * from your_db order by priority DESC");
$response="
 <table id='display' class='display' style='width:100%'>  
 <thead> 
     <tr>  
        <td>Product ID</td>  
        <td>Product Name</td> 
        <td>Product Description</td> 
        <td>Category</td>  
        <td>Sub Category</td> 
        <td>Image</td>
        <td>Priority</td>
     </tr>  
     </thead>";
    $result=mysqli_fetch_array($getdata);
    foreach($result as $row)
    {
         $imageURL = base_url().'/images/'.$row->image;
         $response=$response."<tr>  
            <td>".$row->p_id."</td> 
        <td>".$row->product_name."</td>  
        <td>".$row->product_des."</td>
        <td>".$row->category."</td>
        <td>".echo $row->subcat."</td>

        <td><img src='".$imageURL."' alt='' width='100' height='100'  />
            </td>


       <td>
        <form method='POST' class='dataUpdate'>
        <input type='text' name='priority' id='priority' value='".$row->priority."'/>
        <input type='hidden' name='pid' value='".$row->p_id."'/> 
        <input type='submit' value='Update' />
        </form>


       </td>

        </tr> ";
     }

  $response=$response."</table";
 return $response;

答案 1 :(得分:0)

希望对您有帮助,这里的数据表计数列索引始终以0开头,并且优先级列在索引6上

$(document).ready(function() {
    $('#displayy').DataTable( {
        "order": [[ 6, "desc" ]]
    } );
} );

答案 2 :(得分:0)

所以我得到了答案,如果将来有人要

在文本框中添加onchange功能 “ value =”“ id =” priority“ onchange =” update_priority('p_id?>',this.value)“>

在控制器中添加::

public function priorityadd() 
{ 
 //echo $this->input->post('priority');
 $rowId = $this->input->post("rowId"); 
 $priorityCount = $this->input->post("priority"); 

 $this->load->database(); 
 $this->load->model('PriorityModel'); 
 if($this->PriorityModel->insertp($rowId,$priorityCount)==true){
  echo 1;
 } else{
  echo 0;
 }
}

在模型中添加以下内容::

公共函数select2() {

     $this->db->from('product_details');
     $this->db->order_by('Priority','ASC');
     $query = $this->db->get(); return $query; 

}

也在查看页面中此ajax查询:

<script> 


function update_priority(rowId,val){
  jQuery.ajax({
  url: "<?=base_url()?>Userlog/priorityadd",
  method:"POST",
  data:{rowId:rowId,priority:val},
  success: function(result){
    if(result==1){
     // alert("Priority Updated");
      location.reload();
    }else{
      alert("Error");
    }
  }
  });

}

</script>