Javascript jquery tablesorter不处理输入/选择字段(IE8),在IE8中的所有其他文本字段上都可以正常工作
还可以在所有其他浏览器上对所有字段进行正确排序 当字段是输入字段(jquery datepicker)或要指定的选择框时,唯一的问题是IE8Javascript jquery tablesorter不处理输入/选择字段(IE8),在IE8中的所有其他文本字段上都可以正常工作,javascript,jquery,html,css,internet-explorer-8,Javascript,Jquery,Html,Css,Internet Explorer 8,还可以在所有其他浏览器上对所有字段进行正确排序 当字段是输入字段(jquery datepicker)或要指定的选择框时,唯一的问题是IE8 <tr class="proj_rec" data-id="<?php echo $project->get_id(); ?>"> <td class="proj_id"> <?php echo $project->
<tr class="proj_rec" data-id="<?php echo $project->get_id(); ?>">
<td class="proj_id">
<?php echo $project->get_id(); ?>
</td>
<td>
<?php echo $project->get_desc(); ?>
</td>
<td class="edit">
<select class="touch">
<?php echo $opt_html_business_area; ?>
</select>
<span class="look">
<?php echo $project->get_business_area(); ?>
</span>
</td>
<td class="edit">
<select class="touch">
<?php echo $opt_html_status; ?>
</select>
<span class="look">
<?php echo $project->get_status(); ?>
</span>
</td>
<td class="edit">
<select class="touch">
<?php echo $opt_html_type; ?>
</select>
<span class="look">
<?php echo $project->get_type(); ?>
</span>
</td>
<td class="edit">
<input type="text" class="touch">
</input>
<span class="look">
<?php echo $project->get_owner(); ?>
</span>
</td>
<td>
<?php echo $project->get_enter_date(); ?>
</td>
<td class="edit">
<input type="text" class="touch dtpick">
</input>
<span class="look">
<?php echo $project->get_est_date(); ?>
</span>
</td>
<td class="edit">
<input type="text" class="touch dtpick">
</input>
<span class="look">
<?php echo $project->get_due_date(); ?>
</span>
</td>
<td class="edit">
<input type="text" class="touch dtpick">
</input>
<span class="look">
<?php echo $project->get_next_date(); ?>
</span>
</td>
//project events that happen only on page load
function on_load_events() {
// Adding a new slot
$('#add_project').click(function() {
var emp = $('#entered_new').val();
add_project(emp);
});
$('#project_table').bind('sortStart',function() {
back_to_look();
$('span.cmnt_active').each(function() {
remove_comments($(this));
});
});
$('#project_table').tablesorter({
textExtraction: myTextExtraction
});
//todo: try getting the dataTable to work...
// it might be way better, just not sure how it would handle
// adding unrelated rows on the fly (comments)
//$('#project_table').dataTable();
}
String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
var myTextExtraction = function(node)
{
var elem = $(node);
var theVal = null;
if (elem.hasClass('edit')) {
elem.children().each(function() {
if ($(this).css('display') != 'none') {
theVal = $(this).val();
}
});
} else {
theVal = elem.text();
}
//console.log(theVal);
var c = node.childNodes.length;
if (c == 1) {
theVal = node.innerHTML.trim();
} else if (c == 5) {
theVal = node.childNodes[3].innerHTML.trim();
}
//console.log(theVal);
return theVal;
}
因此,您发布的JSFIDLE中没有任何日期选择器输入或选择。 我创建了一个新的,希望能代表您的数据。在您的情况下,您希望textExtraction函数了解内容并检索正确的值。下面的函数将获取日期选择器的输入值和selects的选定值
textExtraction: function(node)
{
var elem = $(node);
var text = '';
if(elem.find('input').length > 0){
text = elem.find('input').val().trim();
} else if(elem.find('select').length > 0){
text = elem.find('select option[selected]').text().trim();
} else {
text = elem.text().trim();
}
return text;
}
请注意,根据您拥有的数据量,这并不是最有效的实现,但它应该有助于您朝着正确的方向前进。希望有帮助