Showing html tables but searching on json table

mits

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

allan

Hi Piotrek,

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

mits

Hello thanks for quick answer.

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.

mits

Ok, I found great example:

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

I'm not sure what "aoSearchAndSortByElements" is trying to do? You can define an initial filtering using oSearch: http://datatables.net/usage/options#oSearch

Allan