Define search result in a link

ryancrosser

I have undertaken my first dynamic web design project and I am primarily using php. I came across DataTables and find it is exactly what I needed. I have DT working, and have set up the basic options, sorting, etc. I have very basic javascript skills and I am pretty sure that is why I am having problems.

The scenario: I am working on creating an archive of all the sermons preached at our church. Each row of the table is one sermon, and it lists the preacher name, title, date, etc. Some of the sermons are part of series, but not all.

My question covers three separate tasks.

1. I would like to be able to create a link that will only show the sermons in one series, then I could show links to the series in other parts of the website. i would like this to be created dynamically (like I did for the More Information link in code, first line of the table) so I can define the parameters of the link and use a php variable to complete the link. I would need the search criteria to to display in the global search box (so it can easily be removed to view the rest of the table). I have googled for a solution and cannot find anything specific to this.

2. It would be nice to have a button to the right of the global search box (or inside of it on the right side) that can clear the box and return all the rows in the table after a user has completed a search, rather than having to backspace the search away. I know this can be done (using an onClick function, I believe) but I am not sure how to do this. I have seen other examples on how to create the function, but I do not know how to tie it together to the actual link.

3. The last part is similar to #2, except I would like to have a "View All" button in the header that would also reset the search results back to the whole table.

I am sorry for this post being so long, but I wanted to provide enough details to explain myself. Below is my code. Most of it is setting up DT, as the table is built by looping the rows.

Any help that can be provided is greatly appreciated!

Ryan



[code]






@import url("css/custom/base/jquery.ui.all.css");
@import url("css/data_table_style.css");


<!--



-->






$(document).ready(function() {
oTable = $('#dataTable').dataTable({
"bJQueryUI": true,
"bScrollCollapse": false,
"sScrollY": "250px",
"bPaginate": true,
"sPaginationType": "two_button", //full_numbers,two_button
"bStateSave": false,
"bInfo": true,
"bFilter": true,
"iDisplayLength": 10,
"bLengthChange": true,
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"aaSorting": [[ 3, "desc" ]],
"aoColumns": [
/* More Info */ { "bSearchable": false,
"bVisible": true },
/* Name */ null,
/* Title */ null,
/* Date */ null,
/* Service */ null,
/* Keywords */ { "bSearchable": true,
"bVisible": false },
/* Series */ { "bSearchable": true,
"bVisible": false },
/* Link */ null
]
});
} );




function OpenPopup (c) {
window.open(c,
'window',
'width=420,height=400,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=300,top=200');
}


<?php
$db = // database connection
$query = "SELECT
archive.id,
speakertitle.speakerTitle,
speakername.speakerFName,
speakername.speakerLName,
archive.messageTitle,
archive.serviceDate,
archive.service,
archive.otherCustom,
archive.messageAbstract,
archive.keywords,
archive.series,
archive.link
FROM
archive
LEFT JOIN
speakername
ON
speakername.ID = archive.speakerId
LEFT JOIN
speakertitle
ON
speakertitle.id = speakername.speakerTitleId";

$result = $db->query($query, MYSQLI_STORE_RESULT);
$o =
'


More Information
Name
Title
Date
Service
Keywords
Series
Link


';
while(list($id, $speakerTitle, $speakerFName, $speakerLName, $messageTitle, $serviceDate, $service, $otherCustom, $messageAbstract, $keywords, $series, $link) = $result->fetch_row()) {
$o .=
'

'.$speakerTitle.' '.$speakerFName.' '.$speakerLName.'
'.$messageTitle.'
'.$serviceDate.'
'.(($service=="Other") ? $otherCustom : $service).'
'.$keywords.'
'.$series.'
'.$link.'
';
}
$o .= '';
echo $o;
?>




[/code]

allan

Hi Ryan,

1. Your approach for the "More information" looks idea for application here - you basically what to do the same thing, but in the page that is loading look for the _GET parameter that is being passed in and apply that as the default search for the table ( oSearch is the init parameter you want). I use this basic method on this page: http://datatables.net/ref#oSearch .

2. Easiest way of doing this is to change the input element from type 'text' to 'search' (all modern browsers should cope just fine with this HTML5 option - it isn't default in DataTables yet, but it will be one day in the not too distant future. A line of jQuery to change the type attribute of the input element will do it.

3. Use this plug-in http://datatables.net/plug-ins/api#fnLengthChange and set the length to show to be -1, which means show all records. You'll need to store the current value as well I'd imagine so you can toggle back to the old view. That can be read from fnSettings()._iDisplayLength.

Allan