Сортировка HTML-таблицы с использованием плагина tablesorter jquery

Я преобразовал json из cartodb в таблицу HTML с помощью javascript. Теперь я пытаюсь использовать JQuery Plugon для сортировщика таблиц для сортировки таблиц. Я использовал TableSorter в моем коде, но я couldnot возможности получить любую сортировка в result.Below мой код,Сортировка HTML-таблицы с использованием плагина tablesorter jquery

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="js/jquery.tablesorter.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css"> 
    <style> 
     canvas { 
      height: 400px; 
      margin: 5px; 
      width: 1500px; 
     } 

    </style> 
</head> 
<body> 
    <div id="excelDataTable"> 
    </div> 


    <script> 
     $(function() { 
        data2 = "carto"; 
        json_link = 'http://development.localhost.lan:8080/api/v2/sql?q=SELECT * FROM ' + data2; 
        $.getJSON(json_link, function (result) { 
         var th_main = ""; 
         for (var e in result['fields']) { 
          th_main = th_main + '<th>' + e + '</th>'; 
         } 
         var table_header = '<thead>' + 
            '<tr>' + 
            th_main + 
           '</tr>' + 
           '</thead>'; 
         var body_main = ""; 
         for (var i = 0; i < result['rows'].length; i++) { 
          var tr = "<tr>"; 
          for (var ele in result['rows'][i]) { 
           tr = tr + '<td>' + result['rows'][i][ele] + '</td>'; 
          } 
          var tr = tr + "</tr>"; 
          body_main = body_main + tr; 
         } 
         var table_body = '<tbody>' + body_main + '</tbody>'; 
         var table = "<table class='table table-bordered table-hover table-condensed table-striped'>" + table_header + table_body + "</table>"; 
         $("#excelDataTable").html(table); 
         $(document).ready(function() { 
          $("#excelDataTable").tablesorter(); 
         } 
           ); 



     }); 
    } 
         } 
      ); 
     }); 

</script> 


</body>

источник

2015-10-28 harinish

Там есть несколько вещей, которые могут быть причиной Ваша проблема:

Во-первых, есть ошибка в вашей ссылке на jQuery UI - вам не хватает http:.

Во-вторых, ваш скрипт имеет синтаксическую ошибку в строке 57 - есть дополнительный }.

Если вы проверите консоль браузера, это расскажет вам об этих вещах.

Наконец, вам нужно вызвать .tablesorter() как так (см мой последний комментарий для более подробной информации):

$("#excelDataTable > table").tablesorter();

источник

2015-10-28 07:41:10

Я добавил недостающий Http: и дополнительный} был также удален. Но все же я могу получить таблицу, отображаемую в браузере, но не с функциями сортировки. – harinish

Что он делает сейчас? Есть ли сообщения на консоли? Возможно, вы могли бы отредактировать сообщение с образцом JSON, возвращенным вашим вызовом AJAX. –

В консоли не было обнаружено ошибок. Я загрузил свою итоговую таблицу в браузере в виде моментального снимка. – harinish

Сортировка HTML-таблицы с использованием плагина tablesorter jquery

ответ

Смежные вопросы