Блог

Во-первых, какой отличный плагин; Теперь вопрос: можно ли настроить TableSorter для отображения динамических данных в 1 таблице? У меня есть форма на интерфейсе, и после отправки она сохраняется в mysql. Эти данные отображаются в таблице во внешнем интерфейсе. Здесь я сталкиваюсь с проблемой реализации TableSorter. Данные таблицы заполняются с помощью вызова фрагмента кода, поскольку данных много, я мог видеть, что дочерние строки в TableSorter идеально подходят для моего требования. Я нахожу, что таблица создается и заполняется первой строкой в базе данных. Затем 2-я строка создается в другой новой таблице, а 3-я строка — в другой новой таблице и так далее. Есть ли какой-либо код, который я мог бы использовать для устранения этой проблемы, чтобы все отображалось в 1 таблице? Это HTML, который я использую:

 <thead>
    <tr>
        <th>Id No #</th>
        <th>Collection City</th>
        <th>Delivery City</th>
        <th>Date</th>
        <th>Cubic Metres Available</th>
    </tr>
</thead>
<tbody>
    <!-- First row expanded to reveal the layout -->
    <tr>
        <td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
            <a href="#" class="toggle">[[ id]]</a> <!-- link to toggle view of the child row -->
        </td>
        <td>[[ deptown]]</td>
        <td>[[ arrtown]]</td>
        <td>[[ freightdate]]</td>
        <td>[[ cubmt]]</td>
    </tr>
    <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[ vehicletype]]<br></div></td></tr>
    <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[ freightvehicledetail]]<br></div></td></tr>
    <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[ freightvehiclecontact]]<br></div></td></tr>
    </tbody>
  

Надеюсь, у кого-то есть решение, потому что этот плагин потрясающий 🙂

Для наглядности я использую следующие неотредактированные файлы css и js:

тема.синий jquery.tablesorter.pager

jquery.tablesorter jquery.tablesorter.widgets виджет-пейджер

Вызов BloX

  [[!bloX? amp;packagename=`available-freight` amp;limit=`0` amp;classname=`AvailableFreight`     amp;tpls=`bloxouter:outerTpl||row:rowaTpl` amp;debug=`0`]]
  

outerTpl

 <ul> [[ innerrows.row]] </ul>
  

rowaTpl (содержит приведенный выше html (начальный пост) с добавленным кодом tablesorter, ниже)

 <script src="js/jquery-latest.min.js"></script>

<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>

<!-- Tablesorter: pager -->
<link rel="stylesheet" href="../css/jquery.tablesorter.pager.css">
<script src="../js/widget-pager.js"></script>

<script id="js">$(function() {
$(".tablesorter")
    .tablesorter({
        theme : 'blue',
        // this is the default setting
        cssChildRow: "tablesorter-childRow",

        // initialize zebra and filter widgets
        widgets: ["zebra", "filter", "pager"],

        widgetOptions: {
            // output default: '{page}/{totalPages}'
            // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
            pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
            pager_removeRows: false,


            // include child row content while filtering, if true
            filter_childRows  : true,
            // class name applied to filter row and each input
            filter_cssFilter  : 'tablesorter-filter',
            // search from beginning
            filter_startsWith : false,
            // Set this option to false to make the searches case sensitive 
            filter_ignoreCase : true
        }

    });

// hide child rows
$('.tablesorter-childRow td').hide();

// Toggle child row content (td), not hiding the row since we are using rowspan
// Using delegate because the pager plugin rebuilds the table after each page change
// "delegate" works in jQuery 1.4.2 ; use "live" back to v1.3; for older jQuery - SOL
$('.tablesorter').delegate('.toggle', 'click' ,function(){

    // use "nextUntil" to toggle multiple child rows
    // toggle table cells instead of the row
    $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();

    return false;
});

// Toggle widgetFilterChildRows option
$('button.toggle-option').click(function(){
    var c = $('.tablesorter')[0].config.widgetOptions,
    o = !c.filter_childRows;
    c.filter_childRows = o;
    $('.state').html(o.toString());
    // update filter; include false parameter to force a new search
    $('table').trigger('search', false);
    return false;
});
  

});

Надеюсь, это то, что вы хотите, если нет, пожалуйста, обновите, и я углублюсь в BloX.

Извините, я не знаком с использованием MIGXDB или подключаемого модуля BloX; но я обновлю теги этого вопроса.

Я могу помочь с частью визуальной проблемы… Комбинация rowspan и colspan не совпадают в родительских и дочерних группах строк. Установлено rowspan 2 значение, но есть 3 дочерние строки. Итак, либо установите значение rowspan to 4 (включает родительский элемент), либо сделайте так, чтобы третья и четвертая дочерние строки имели colspan значение of 5 вместо 4 .

 <!-- First row expanded to reveal the layout -->
<tr>
    <td rowspan="4">
        <a href="#" class="toggle">[[ id]]</a>
    </td>
    <td>[[ deptown]]</td>
    <td>[[ arrtown]]</td>
    <td>[[ freightdate]]</td>
    <td>[[ cubmt]]</td>
</tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[ vehicletype]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[ freightvehicledetail]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[ freightvehiclecontact]]<br></div></td></tr>