Showing html tables but searching on json table
Showing html tables but searching on json table
Hello,
at first, I would like to congratulation - DataTables is great script!
Ok, now I writing about my problem, for example:
I have html table:
[code]
date
info
options
2010-01-18T21:14:53Z
Start: test name 1
URL: http://profile.samplepage.com/test-name-1
User ID: 123456#
User PIN: 987654#
Protected: zxcvbnm
- view details
- edit
- delete
- join group
[/code]
and JavaScript:
[code]
$(document).ready(function (){
var oTable = $('#sampleTable').dataTable({
"bLengthChange": false,
"bSort": true,
"bFilter": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength" : 4,
});
});
[/code]
All work fine, but what can I sort and search only by second column and by values from json:
[code]
var data = {
0 : {
'id' : 223,
'name' : 'test name 1',
'url' : 'http://profile.samplepage.com/test-name-1',
'description' : ''
}
};
[/code]
??
I would like to set data in options param.
index (0) - row in table (tbody)
name, url, description - search and sort on this values
Sorry for my english.
Regards
Piotrek
at first, I would like to congratulation - DataTables is great script!
Ok, now I writing about my problem, for example:
I have html table:
[code]
date
info
options
2010-01-18T21:14:53Z
Start: test name 1
URL: http://profile.samplepage.com/test-name-1
User ID: 123456#
User PIN: 987654#
Protected: zxcvbnm
- view details
- edit
- delete
- join group
[/code]
and JavaScript:
[code]
$(document).ready(function (){
var oTable = $('#sampleTable').dataTable({
"bLengthChange": false,
"bSort": true,
"bFilter": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength" : 4,
});
});
[/code]
All work fine, but what can I sort and search only by second column and by values from json:
[code]
var data = {
0 : {
'id' : 223,
'name' : 'test name 1',
'url' : 'http://profile.samplepage.com/test-name-1',
'description' : ''
}
};
[/code]
??
I would like to set data in options param.
index (0) - row in table (tbody)
name, url, description - search and sort on this values
Sorry for my english.
Regards
Piotrek
This discussion has been closed.
Replies
A quick solution would be to set the column type to 'html' ( http://datatables.net/examples/advanced_init/html_sort.html ), which will strip the HTML tags for the filtering, and set bSearchable ( http://datatables.net/usage/columns#bSearchable ) to false for the columns that you don't want to be able to search on.
Does that help?
Allan
Your answer not really help me because I would like to search for object array "data" (not for html table).
I know bSearchable must be false. My problem is searching for data but showing in html results.
Default is searching and showing on html table.
oryginal sample:
[code]$(document).ready(function() {
$('#demo').html( '' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "A";
}
return sReturn;
}
}
]
} );
} );[/code]
I want like this:
[code]$(document).ready(function() {
$('#demo').html( '' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine", "bSearchable": false },
{ "sTitle": "Browser" },
{ "sTitle": "Platform", },
{ "sTitle": "Version", "sClass": "center", "bSearchable": false },
{
"sTitle": "Grade",
"bSearchable": false ,
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "A";
}
return sReturn;
}
}
],
"aoSearchAndSortByElements": [
{ "null" },
{ "Explorer" },
{ "OS" },
{ "null" },
{ "null" }
]
} );
} );[/code]
If isset something like this method please show me.
Allan