将带有 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)+ 搜索不起作用的主要内容,如果未能解决你的问题,请参考以下文章