Sort Icons display but sorting not happening

swathikuchi

Hi ,

I am new to this plugin and trying to use it on html table which has custom formatting. I applied the basic dataTable functionality on the table , I can see the sort icons on the headers but sorting is not happening when clicked. I have a and structure. Can any one please help me to understand this ?

Thanks,
Swathi.

tangerine

http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

swathikuchi

Hi Tangerine ,

Sorry about that , here is the jfiddle link , http://jsfiddle.net/cCzqn/113/
The td contents are inputs which are disabled , sorting on the columns is not happening.

Thanks,
Swathi.

allan

Its because you have your text in an `input` element. DataTables strips HTML by default since you typically don't want to sort HTML, and since the display value is only a property of the element, it goes as well.

To address this, DataTables has live DOM abilities via plug-ins: http://datatables.net/release-datatables/examples/plug-ins/dom_sort.html

Allan

swathikuchi

Hey Allan ,

Thanks for the reply now I understand , i tried adding the input function to the code and I still could not make it work. Can you please help me fixing this. Here is the updated fiddle. http://jsfiddle.net/cCzqn/122/

Thanks

swathikuchi

@Allan ,

Thanks for the link , I got it worked :) . One question though , should I mention all the columns under "aoColumns": or just the columns which I need a sort icon on them ? As I can see that sort wouldn't work If I am not mentioning all the columns. In my real application I have nearly 30 cols . So is there any way to overcome this . Thanks once again

- Swathi

allan

aoColumns _must_ define every column in the table. Use aoColumnDefs if you want to define options for just some select columns - see the documentation here: http://datatables.net/usage/columns

Allan

swathikuchi

Thanks for the info. I could not make this work on my real application , the search box, sort icons previous and next buttons are shown , but seems to be disabled. I added the jquery.dataTables.min.js and the css file . Is there anything more I should add. I replicated the same table with less columns in the fiddle. The fiddle worked perfect! But now facing issue with my actual code. Any help .

allan

We'd need to be able to see the actual code. If the fiddle works okay, but the production code doesn't, then there is something wrong wight he production code :-).

Allan

swathikuchi

Thanks for the prompt reply .. I doubt if the html table is picking up the datatable js file. Is there a way to check if the plugin is applied on the table ? I can see the icons of sort , pagination , search box , but no functionality at all . Any suggestions would be helpful.

Thanks much.

allan

Yes there is a static function for that: http://datatables.net/api#fnIsDataTable .

Allan

swathikuchi

Hey Allan ,

I am totally stuck , this is the debugger link, I cannot understand why there is no functionality at all when I applied the DataTable to my DOM , client side Html table. Help needed :(
http://debug.datatables.net/icehal . How could I delete the old debug data ? I have 28 columns which are input text boxes with text in it.

- Sorting not working . no change on clicks of the icons
- search box always says no records matching
- pagination : only icons are displayed disabled and I can see all 700 rows.





$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') input', tr).val();
} );
}
$('#tableone').dataTable( {
"aoColumns": [
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},

{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},

{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },

{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" }

]
});



Thanks,
Swathi.

swathikuchi

Hey Allan ,

I tried figuring out what would be wrong but no luck . Can you please give me some scenarios where this kind of behavior might occur.
- Showing sort arrows on header but no sorting functionality when clicked .
I added the js file and css file , added the functions to sort the live dom elements as above. But still I cant figure out where I am going wrong.

Kindly help.

Thanks,

allan

It sounds very much like there is a Javascript error on the page. Is there nothing in the browser's error console? I would be extremely surprised if there isn't since you appear to have 27 columns in your HTML, but only 5 defined in your aoColumns. That will cause an error. They _must_ match.

Allan

swathikuchi

Allan ,

That was the old record I believe , first time I used the debugger on an example , when I am trying to apply debugger with my real application its taking more time to process and just says loading the data to server . I am trying to figure out how to delete the old debug data but could not find any delete button . Can you please tell me how I can delete the debug data . Once If I can do that , I will be able to debug my actual application and send you more information about where I am stuck .

Thanks,
Swathi.

swathikuchi

Hey Allan or anyone ,

I know you guys would be pretty busy with replying ... but can you please help me understand why the basic data table functionality is not working for me.
-Pagination shows prev next buttons but clicks does not work , it shows all entries even if i requested for 10 .
-sorting is not happening at all , but i can see the icons . I have inputs in the column with mixed content like this (MM2333R88).
-Search box is displayed but no functionality.

I checked fnIsDataTable or not and it returns true.
Real time application is a DOM HTML Table which is generated using the info that comes from the database , after the table is ready with all the records then I apply this plugin on that.

I can provide you the debug information if you can guide me how to delete the old one and debug the real application.

Any help would be appreciated , thanks once again

Thanks,
Swathi.

swathikuchi

FYI I am using DataTables-1.9.4 .

swathikuchi

Hey ,

Is there anyone who can help me ?

Thanks,

tangerine

[quote]I can provide you the debug information if you can guide me how to delete the old one.../quote]
Forget the old one - just submit a new debug reference.

swathikuchi

@tangerine : I am trying to run the debug on my application , its just taking too long . "uploading to the server " , this is the message it shows .

tangerine

Does your browser's error console tell you anything?

allan

I've deleted your old debug trace now.

We are really going to need a link to your page to be able to offer any help here I think. We are really just guessing without being able to actually see the problem, and actually offer some help.

Allan

swathikuchi

Hi Allan and Tangerine ,

Thanks for the replies , I am ready to share but tell me how you want me to.

This is a dom html table with data getting from database, I tried doing the data tables debug , it says uploading data to server but never ends.

I have all the data loaded in the table but no sort , no search , no pagination is happening. I can see next and prev buttons but disabled.

Instead of ten entries it shows all records. And for some reason only last row is highlighted to blue color.

@ Tangerine : I am not getting any error in the browser error console , except this warning

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

I want to share at least a screen shot but could not find any attachment option to this post.


Thanks,
Swathi.

swathikuchi

I dont know if this helps , but this is from the error console of the browser

submit.php
debug.datatables.net/remote
25 ms
status.php?callback=jQuery17107438305462710559_1395087992070&unique=1395088064695&_=1395088076468
debug.datatables.net/remote
0
status.php?callback=jQuery17107438305462710559_1395087992071&unique=1395088064695&_=1395088078722
debug.datatables.net/remote
107 ms1 ms
status.php?callback=jQuery17107438305462710559_1395087992072&unique=1395088064695&_=1395088079336
debug.datatables.net/remote
0
status.php?callback=jQuery17107438305462710559_1395087992073&unique=1395088064695&_=1395088080052
debug.datatables.net/remote
207 ms0
status.php?callback=jQuery17107438305462710559_1395087992074&unique=1395088064695&_=1395088080762
debug.datatables.net/remote
272 ms0 ms
771 requests ❘ 304 KB transferred
HeadersPreviewResponseCookiesTiming
Request URL:http://debug.datatables.net/remote/submit.php?
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:10052611
Content-Type:application/x-www-form-urlencoded
Cookie:__cfduid=d1f31515d2ebfc06d9d206a60fe62d0481386896703330; Vanilla=74071-1397312658%7C383b81af592cea8fd210598acee6fa4c%7C1394720658%7C74071%7C1397312658; Vanilla-Volatile=74071-1395250018%7Ce3fd30b579c74cd7cf004db8bd57997d%7C1395077218%7C74071%7C1395250018; SpryPanel_site=81ed8be21549c9cbf4e2261bc444c5a4; VanillaSessionID=9c0b3dc1041aec9f201d76602c93689f; __utma=15923235.46589348.1394637215.1395081234.1395086627.8; __utmb=15923235.2.10.1395086627; __utmc=15923235; __utmz=15923235.1394755442.4.4.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided); __utma=120757021.1132346401.1394548989.1395069352.1395077222.26; __utmb=120757021.40.10.1395077222; __utmc=120757021; __utmz=120757021.1394993088.24.9.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)
Host:debug.datatables.net
Origin:http://127.0.0.1:8888
Referer:http://127.0.0.1:8888/Finance_Dashboard_User_Page.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36
Form Dataview sourceview URL encoded
data:(unable to decode value)
unique:1395088064695
Response Headersview source
Connection:close
Content-Length:35
Content-Type:text/html
Date:Mon, 17 Mar 2014 20:27:56 GMT
Server:Apache/2.4.6 (Unix) OpenSSL/0.9.8e-fips-rhel5 mod_bwlimited/1.4 PHP/5.3.27
Vary:User-Agent
X-Powered-By:PHP/5.3.27

swathikuchi

Hey Allan ,

I tried debugging and now I can see this error .


GET http://127.0.0.1:8888/null?sEcho=2&iColumns=28&sColumns=&iDisplayStart=0&iD…true&bSortable_25=true&bSortable_26=true&bSortable_27=true&_=1395155997136 404 (Not Found) jquery-1.8.2.min.js:2
send jquery-1.8.2.min.js:2
p.extend.ajax jquery-1.8.2.min.js:2
j.defaults.fnServerData jquery.dataTables.min.js:132
wa jquery.dataTables.min.js:46
x jquery.dataTables.min.js:38
K jquery.dataTables.min.js:52
O jquery.dataTables.min.js:86
e jquery.dataTables.min.js:87
(anonymous function) jquery.dataTables.min.js:88
(anonymous function) jquery.dataTables.min.js:94
p.event.dispatch jquery-1.8.2.min.js:2
g.handle.h

Any idea where I am going wrong ?

This is my code

$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.value );
} );
alert("aData in function "+iColumn +" "+aData);
return aData;
}

$('#tableone').dataTable( {
bServerSide: true,
aoColumns: [

{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},

{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text"},

{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },

{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text"},
{ "sSortDataType": "dom-text" }

]

});

Thanks,
Swathi.

swathikuchi

Hey Allan ,

I am trying to apply data table on already constructed table which has columns with input fields. I did not understand if I had to use any of these parameters Ajaxresource and adata[] . Kindly help me to understand.

Thanks,
Swathi.

allan

Looks like you'e enabled server-side processing, but not provided an Ajax data source ( sAjaxSource ).

However, as I said before, and the forum rules very clearly state, please provide a test case. Without a test case, I cannot offer any further help with this issue.

Allan

swathikuchi

Hi Allan ,

Thanks for the reply , I am working on providing you a test case. In the mean time can you tell me if data tables can do sorting and pagination on a html table which is already populated with values. I have data on client side , DOM table with data.

Thank you so much for your patience.

-Swathi.

tangerine

[quote] can you tell me if data tables can do sorting and pagination on a html table which is already populated with values.[/quote]
Yes it can.
http://datatables.net/release-datatables/examples/data_sources/dom.html

swathikuchi

Hi Allan & Tangerine ,

Finally I could run debug on my application , this is the link
http://debug.datatables.net/apahiq . I actually have 28 columns with 500+ records on client side html table , I am not sure why it says only 1 record/row . And I think this is the reason why pagination and sorting is not happening. I hope you can help me now with this information.

Thanks,
Swathi.

allan

I don't know why it says 1 row only either, if you say it has 500+ records. Once again (and for the final time) we'd need a test case....