My datatable was acting cool and all until I added a link to each integer element of a particular column. All of a sudden the sorting feature was acting weird. Before I had something like this 23 After adding a link, I have 23 It turns out after I added the links, the default sorting function is treating everything as string. So to fix that I will need to add custom sort function to explicitly tell datatable how I want to do my sorting. ...
When dealing with dynamic creation of DOM objects, sometimes you need to check if a certain element exists. Below is how you check: if ($('#my_element').length > 0){ // it exists! } If you need to check whether a dropdown has any options, here is how if ($('#my_dropdown option').length > 0){ // contains options }
If you have ever played with jeditable, eventually you will get to this issue, which is dealing with the textarea. The Textile renderer on the official jeditable demo page works perfectly fine, but when I tried it I experienced quite some difficulty. Basically the text I enter would NOT be what I see after pressing the ok button, due to the html rendering of the newline character. I found a lot of people sharing their pain all over the internet: ...
If you are using the jquery datepicker and have been displaying the date in the usual mysql date format, you probably will find it annoying that the date picker gives you the slash date format back. Here is how to keep the mysql date dash format all throughout. var queryDate = '2012-01-10', dateParts = queryDate.match(/(d+)/g) realDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]); // months are 0-based! $('#datePicker').datepicker({ dateFormat: 'yy-mm-dd' }); // format to show $('#datePicker').datepicker('setDate', realDate); The code above will translate the mysql date to do the initial setup, then use the dash format for the text field. ...
If you are using the jQuery datatable with the editable extension, you probably know that you can only highlight one single row (tr). In my opinion, that’s really for the purpose of integrating the single row add/delete functions. If you need to implement multiple row operations, thus needing multiple row selection, here is how you can do it: Open up jquery.dataTables.editable.js Toward the end of the file, look for $(oTable.fnSettings().aoData).each(function () { $(this.nTr).removeClass(properties.sSelectedRowClass); }); ...
Very often we need to present many checkboxes, and there is one additional checkbox for select-all. The html code is somewhat like the following: Select All 1 2 3 4 Notice I name the js function toggle_selection because you may actually make it toggle later on. Then, to enable the usual select-all action, this is the code: function toggle_selection(){ $("input[name='opt[]']").each(function (index, el) { if ($("#my_select_all").is(":checked")) $(el).attr("checked", "checked"); }); } Straightforward. ...
If you are looking into learning javascript frameworks, this will likely be a question you will ask eventually. jQuery or MooTools? They are both very well known and well developed. By chance I came across this site http://jqueryvsmootools.com/ and I was quite impressed. The author did a pretty comprehensive analysis of these two frameworks. Good stuff! Be warned though, it’s quite a long read! ;)