将带有 URL 变量的超链接添加到数据表(jQuery)+ 搜索不起作用

Posted

技术标签:

【中文标题】将带有 URL 变量的超链接添加到数据表(jQuery)+ 搜索不起作用【英文标题】:Adding hyperlink with URL variables to datatable (jQuery) + Search not working 【发布时间】:2016-03-31 12:37:15 【问题描述】:

我正在使用datatable jQuery 插件来呈现来自 mysql 数据库的多个连接表。我能够根据需要渲染表格。但是有2个问题。

1st:我希望有一个字段(StudentID)具有超链接,并在单击它时将该值作为 URL 变量传递给其他页面(如 ViewDetails.php?StudentID=21)。目前我可以将超链接添加到字段 (StudentID),但该字段的文本显示“未定义”而不是 StudentID,并且单击它时变量 (StudentID) 不会传递到 URL。

2nd :搜索不起作用。

我正在为我的两个文件提供代码,(1) Index.php(带有表格的文件和将 ajax 请求发送到 response.php 文件的 js)。 (2) response.php(包含将 json 编码数据发送到 index.php 的 sql 和搜索代码的文件)。我正在使用数据表版本 1.10.10。我正在关注这个tutorial

以下是我的代码:

index.php

<head>
...
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/customize.css" rel="stylesheet" type="text/css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
...
</head>
<body>
...
  <div class="row">
    <div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <table id="employee_grid" class="display table-bordered">
        <thead>
          <tr>
             <th class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Student Name</th>
             <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1">Gender</th>
             <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1">City</th>
             <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Course Description</th>
             <th class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Subject</th>
             <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-right">Scholarship</th>
             <th class="col-lg-2 col-md-2 col-sm-2 col-xs-2">View Details</th>
          </tr>
        </thead>
       </table>
     </div>
   </div>
...
<script>
$( document ).ready(function() 
    $('#employee_grid').DataTable(
        "bProcessing": true,
        "serverSide": true,
        "autoWidth": true,
        "stateSave": true,
        "lengthMenu": [ 10, 25, 50, 100 ],
        "ajax":
                url :"response_b.php", // json datasource
                type: "post",  // type of method,GET/POST/DELETE
                error: function()
                $("#employee_grid_processing").css("display","none");
                
            ,
        "columnDefs": [ 
        "targets": 6,
        "data": "StudentID",
        "render": function ( data, type, full, meta ) 
        return '<a href="beneficiary.php?StudentID="'+data+'">'+data+'</a>';
        
     ]
  );   
);
</script>
</body>

response.php

<?php
    //include connection file 
    include_once("connection.php");

    // initilize all variable
    $params = $columns = $totalRecords = $data = array();

    $params = $_REQUEST;

    //define index of column
    $columns = array( 
        0 => '`Full Name`',
        1 => 'Gender', 
        2 => 'CityName',
        3 => 'CourseDescriptionLong',
        4 => '`Subject`',
        5 => 'ScholarshipAwarded',
        6 => 'StudentID'
    );

    $where = $sqlTot = $sqlRec = "";

    // check search value exist
    if( !empty($params['search']['value']) )    
        $where .=" WHERE ";
        $where .=" (`Full Name` LIKE '".$params['search']['value']."%' ";    
        $where .=" OR CityName LIKE '".$params['search']['value']."%' ";

        $where .=" OR CourseDescriptionLong LIKE '".$params['search']['value']."%' )";
    

    // getting total number records without any search
    $sql = "SELECT fullnames.`Full Name`, studentdetails.Gender, lt_cities.CityName, lt_coursedescription.CourseDescriptionLong, lt_coursesubject.`Subject`, Sum(scholarshipdetails.ScholarshipAwarded), studentdetails.StudentID, coursedetails.CourseType, lt_coursedescription.CourseDescriptionShort, scholarshipdetails.ScholarshipYear FROM studentdetails INNER JOIN scholarshipdetails ON studentdetails.StudentID = scholarshipdetails.StudentID INNER JOIN coursedetails ON studentdetails.StudentID = coursedetails.StudentID AND scholarshipdetails.ScholarshipYear = coursedetails.Scholarshipyear LEFT JOIN lt_coursedescription ON coursedetails.CourseID = lt_coursedescription.CourseID INNER JOIN tuitionfeedetails ON studentdetails.StudentID = tuitionfeedetails.StudentID AND scholarshipdetails.ScholarshipYear = tuitionfeedetails.ScholarshipYear INNER JOIN fullnames ON studentdetails.StudentID = fullnames.StudentID INNER JOIN lt_cities ON lt_cities.CityID = studentdetails.City LEFT JOIN lt_coursesubject ON lt_coursesubject.CourseID = lt_coursedescription.CourseID AND lt_coursesubject.SubjectID = coursedetails.CourseSubject GROUP BY studentdetails.StudentID";
    $sqlTot .= $sql;
    $sqlRec .= $sql;
    //concatenate search sql if value exist
    if(isset($where) && $where != '') 

        $sqlTot .= $where;
        $sqlRec .= $where;
    


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

    $queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));


    $totalRecords = mysqli_num_rows($queryTot);

    $queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch employees data");

    //iterate on results row and create new index array of data
    while( $row = mysqli_fetch_row($queryRecords) )  
        $data[] = $row;
       

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

    echo json_encode($json_data);  // send data as json format
?>

我在 Stack Overflow 上研究过这类问题,有很多问题有答案,但似乎没有一个适合我。

谁能指导我?

【问题讨论】:

有人可以帮忙吗? 【参考方案1】:

将您的 DataTables 初始化代码更改为:

$('#employee_grid').DataTable(
    "stateSave": true,
    "ajax": 
       "url": "response_b.php",
       "type": "POST"
    ,
    "columnDefs": [ 
       "targets": 6,
       "render": function ( data, type, full, meta ) 
          return '<a href="beneficiary.php?StudentID='+data+'">'+data+'</a>';
        
    ]
);   

【讨论】:

@Gyrocode.com 解决的第一个问题是帮助。第二个问题仍然存在。搜索不起作用...

以上是关于将带有 URL 变量的超链接添加到数据表(jQuery)+ 搜索不起作用的主要内容,如果未能解决你的问题,请参考以下文章

将 URL 转换为 C# 字符串中的超链接的最简单方法?

将 django-rest-framework 中的超链接添加到 ModelViewSet

如何在 Tkinter 中创建带有标签的超链接?

如何使用 Pandas 在列中添加值的超链接?

115sha1链接怎么使用?

如何将字符串中的 URL 呈现为可点击的超链接?