Блог

Я написал код, который заполняет html-таблицу с помощью ajax-вызова, используя следующий код —

 $.ajax({
    type: "POST",
    url: "my_url",
    data: JSON.stringify(result),
    async: true,
    dataType: "json",
    contentType: "application/json; charset= Shift-JIS",
    success: function (response) {
        glResp = response;
        populateTable(glResp);
    },
    error: function (error) {
        console.log(error);
        //alert("Error!!");
    }
});
  

Данные корректно отображаются в таблице с помощью флажка перед каждой строкой. Теперь я хочу сначала показать строки, у которых установлены флажки в таблице, и остальные строки после этого. Я написал следующий код, но, похоже, он не работает. Кто-нибудь может помочь?

 function populateTable(finalObject) {
    var obj = finalObject;

    var headers1 = ['Name', 'City', 'Job', 'Salary'];
    var table = $("<table id='my-table' />");
    var columns = headers1;
    columns.unshift('');
    var columnCount = columns.length;
    var row = $(table[0].insertRow(-1));

    for (var i = 0; i < columnCount; i  ) {
        if (i == 0) {
            var headerCell = $("<th><input type='button' id='sort'></th>");
            row.append(headerCell);
        }
        else {
            var headerCell = $("<th/>");
            headerCell.html([columns[i]]);
            row.append(headerCell);
        }
    }

    $.each(obj, function (i, obj) {
        $row = '<tr><td><input type="checkbox"></td><td>'   obj.Name   '</td><td>'   obj.City   '</td><td>'   obj.Job   '</td><td>'   obj.Salary   '</td></tr>';
        table.append(row);
    });

    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);
}

$(function () {
    $('#sort').on('click', function () {
        var newTable = $('<table class="table"></table>');
        $('.my-table').find('tr').each(function ($index, $value) {
            if ($(this).find('input[type=checkbox]').is(':checked')) {
                newTable.prepend($(this));
            } else {
                newTable.append($(this));
            }
        });
        $('.table').replaceWith(newTable);
    });
});
  

Вы можете сделать это следующим образом. Просмотрите все, tr как вы делаете, и добавьте те, tr которые были сняты checkbox в последнем из table .

 $('#dvCSV').on('click', '#sort', function () {
    $('#my-table').find('tr:not(:first)').each(function () {
        if (!$(this).find(':checkbox').is(':checked'))
            $('#my-table').append(this);
    });
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
    <tr>
        <th>
            X
        </th>
        <th>Row Name</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Row 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Row 2</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Row 3</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Row 4</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Row 5</td>
    </tr>
</table>

<div id="dvCSV">
    <button id="sort">Sort</button>
</div>