处理对数据表中显示按钮的ajax响应

时间:2018-09-23 22:35:38

标签: javascript html ajax datatable

我的数据表看起来像这样

$(document).ready(function() {
  $('#list').dataTable({
    "bProcessing": true,
    "serverSide": true,
    "ajax":{
          url :"list.php",
          type: "GET",
          error: function(){
            $("#post_list_processing").css("display","none");
          }
        },
        "columns": [
              { "data": "title" },
              { "data": "description" }
          ]
  });
});

并且我有一个js函数,该函数使用ajax调用该表的数据,这是下面的js函数

$params = $columns = $totalRecords = $data = array();

    $params = $_REQUEST;

    $columns = array(
        0 => 'title',
        1 => 'description'
    );

    $where_condition = $sqlTot = $sqlRec = "";

    if( !empty($params['search']['value']) ) {
        $where_condition .= " WHERE ";
        $where_condition .= " ( title LIKE '%".$params['search']['value']."%' ";    
        $where_condition .= " OR description LIKE '%".$params['search']['value']."%' )";
    }

    $sql_query = " SELECT * FROM products ";
    $sqlTot .= $sql_query;
    $sqlRec .= $sql_query;

    if(isset($where_condition) && $where_condition != '') {

        $sqlTot .= $where_condition;
        $sqlRec .= $where_condition;
    }

    $sqlRec .=  " ORDER BY ". $columns[$params['order'][0]['column']]."   ".$params['order'][0]['dir']."  LIMIT ".$params['start']." ,".$params['length']." ";


    try{
        $db = new db();
        $db = $db->connect();
        $queryTot = $db->query($sqlTot);

        $totalRecords = $queryTot->rowCount();

        $queryRecords = $db->query($sqlRec);

        while( $row = $queryRecords->fetch(PDO::FETCH_ASSOC) ) { 
        $data[] = $row;
        }   

        $json_data = array(
            "draw"            => intval( $params['draw'] ),   
            "recordsTotal"    => intval( $totalRecords ),  
            "recordsFiltered" => intval($totalRecords),
            "data"            => $data
        );

        $db = null;
        if(empty($json_data)) {
            $response->getBody()->write($error);
        } else {
            $response->getBody()->write(json_encode($json_data));
        }
    } catch(PDOException $e) {
        $response->getBody()->write($errormsg);
    }

当前,此ajax响应正在返回产品ID为json格式的数据,如以下示例所示

  

数据:[{id:“ 12”,标题:“ product1”,说明:“ test”,…},…] 0:{id:   “ 12”,标题:“ product1”,说明:“ test”,…}

我想做的是在删除列下显示一个带有删除链接的链接,我应该通过删除URL传递产品ID,但是我似乎无法绕过如何处理响应ID并在数据库中显示一个用于删除功能的按钮,请您帮帮我吗?预先感谢

更新:

list.php

LinkedList::ListNode

2 个答案:

答案 0 :(得分:0)

所以我想你想要类似的东西

About generating columns

JSFiddle Example

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Title</th>
      <th>Desc</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Title</th>
      <th>Desc</th>
      <th>Delete</th>
    </tr>
  </tfoot>
</table>

`

$(document).ready(function() {
  var table = $('#example').DataTable({
    "data": [

      {
        "title": "Hey",
        "description": "hoy",
        "id": 1
      },

      {
        "title": "Hey",
        "description": "hoy",
        "id": 2
      },
      {
        "title": "Hey",
        "description": "hoy",
        "id": 3
      }
    ],
    "columns": [{
      "data": "title"
    },
                {
                  "data": "description"
                },
                {
                  "data": function(item) {
                    return '<a href="/delete/' + item.id + '">Delete</a>';
                  }
                }
               ]
  });

  $('#example tbody').on('click', 'a', function() {
    var data = table.row($(this).parents('tr')).data();
    alert(data[0] + "'s salary is: " + data[5]);
  });
});

答案 1 :(得分:0)

您都可以在list.php上或在处理ajax响应时生成Delete Link。

在客户端方法中,您需要先使用"dataSrc“方法来修改ajax响应,然后再使用:

$(document).ready(function() {
  $('#list').dataTable({
    "bProcessing": true,
    "serverSide": true,
    "ajax":{
          "url" :"list.php",
          "type": "GET",
          "error": function(){$("#post_list_processing").css("display","none");},
          "dataSrc": function (json) {
              var return_data = new Array();
              for(var i=0;i< json.length; i++){
                return_data.push({
                  'title': json[i].title,
                  'description' : json[i].description,
                  'deleteLink' : '<a href="delete.php?id' + json[i].id +'">delete</a>"
                })
              }
              return return_data;
            }
          },
        "columns": [
              { "data": "title" },
              { "data": "description" },
              { "data": "deleteLink" }
          ]
  });
});

在服务器端方法中,您可以在ID和html标签上使用PHP级联(+)生成删除链接的HTML,并将删除链接作为JSON响应的新元素插入一次。因此,您无需在Ajax上 dataSrc 来修改响应数据