Question

我正在尝试刷新我的数据而不必删除整个表然后重新填充。因为当我过滤我的表时，它会刷新表，然后过滤器将被重置，并且必须再次过滤表。

中的“datatables”等插件

HTML：

<!-- Sync status list table -->
<div class="table-responsive">          
    <table class="table table table-striped table-bordered table-hover" id="dataTables-example">
       <thead>
       <tr>
         <th>User</th>
         <th>Sync</th>
       </tr>
       </thead>
       <tbody>

       </tbody>
    </table>
</div>

的JavaScript / JQuery的：

// Get all sync status' logging, and append to sync logging table (sync page)
function GetSyncStatusUsers(selectFromGroup)
{
var currentArray;

$.post("php/getServerLogging.php",
{
    command: "GetLastSyncUser",
    groupName: selectFromGroup
})

.success(function (data)
{
    var jsonMessage = JSON.parse(data);

    $('#dataTables-example td').remove();
    $("#dataTables-example tr:empty").remove();

    // Check to see if response message returns back "OK"
    if (jsonMessage.RESPONSE == 'OK')
    {

        if ($("#dataTables-example").length)
        {

            var syncStatusTableBody = $('#dataTables-example').children('tbody');
            var syncStatusTable = syncStatusTableBody.length ? syncStatusTableBody : $('#dataTables-example');

            // Loop through all the returned records and add them to select box
            for (var i = 0; i < jsonMessage.RECORDS.length; i++)
            {

                var currentRecord = jsonMessage.RECORDS[i];

                // Returned from mysql timestamp/datetime field
                var LastSyncTime;
                if (currentRecord['LastSync'] == null)
                {
                    LastSyncTime = "No Last sync record found";
                }
                else
                {
                    // Return last sync time in UK format
                    LastSyncTime =   GetCurrentDateUKFormatFromSQL(currentRecord['LastSync']['date']);
                }

                // Append to sync status table
                syncStatusTable.append("<tr id=" + currentRecord["PatientID"] + "><td class='patientListNames'>" + currentRecord['Firstname'] + ' ' + currentRecord['Surname'] + "</td><td>" + LastSyncTime + " (" + TimeAgo(SubtractDates(currentRecord['LastSync']['date'])) + ")" + "</td></tr>");
            }
        }
    }
});
}


function GetCurrentDateUKFormatFromSQL(dateFromSQL)
{

     // Format last SQL time to UK format
     var dateStr = dateFromSQL;
     var a = dateStr.split(" ");
     var logDate = a[0].split("-");
     var logTime = a[1].split(":");
     var dateHours = parseInt(logTime[0]);
     var dateMinutes = parseInt(logTime[1]);
     var dateSeconds = parseInt(logTime[2]);

     if (dateSeconds < 10)
     {
        dateSeconds = "0" + dateSeconds; 
     }

     if (dateMinutes < 10)
     {
        dateMinutes = "0" + dateMinutes;
     }

     if (dateHours < 10)
     {
        dateHours = "0" + dateHours;
     }

     // Return UK formatted date
     var ukFormateSQLDate = logDate[2] + '-' + logDate[1] + '-' + logDate[0] + ' ' + dateHours + ':' + dateMinutes + ':' + dateSeconds;
     return ukFormateSQLDate;
}

Answer 1

对于纯客户端过滤器解决方案，请尝试使用jQuery DataTables插件：

https://www.datatables.net/

Answer 2

经过多次尝试和尝试新事物，我终于找到了我想要的解决方案。所以，如果有人正在寻找类似的解决方案，或者一直试图找出如何做到这一点，那么这就是答案。

上一个代码：

// Get all sync status' logging, and append to sync logging table (sync page)
function GetSyncStatusUsers(selectFromGroup)
{
var currentArray;

$.post("php/getServerLogging.php",
{
    command: "GetLastSyncUser",
    groupName: selectFromGroup
})

.success(function (data)
{
    var jsonMessage = JSON.parse(data);

    $('#dataTables-example td').remove();
    $("#dataTables-example tr:empty").remove();

    // Check to see if response message returns back "OK"
    if (jsonMessage.RESPONSE == 'OK')
    {

        if ($("#dataTables-example").length)
        {

            var syncStatusTableBody = $('#dataTables-example').children('tbody');
            var syncStatusTable = syncStatusTableBody.length ? syncStatusTableBody : $('#dataTables-example');

            // Loop through all the returned records and add them to select box
            for (var i = 0; i < jsonMessage.RECORDS.length; i++)
            {

                var currentRecord = jsonMessage.RECORDS[i];

                // Returned from mysql timestamp/datetime field
                var LastSyncTime;
                if (currentRecord['LastSync'] == null)
                {
                    LastSyncTime = "No Last sync record found";
                }
                else
                {
                    // Return last sync time in UK format
                    LastSyncTime =   GetCurrentDateUKFormatFromSQL(currentRecord['LastSync']['date']);
                }

                // Append to sync status table
                syncStatusTable.append("<tr id=" + currentRecord["PatientID"] + "><td class='patientListNames'>" + currentRecord['Firstname'] + ' ' + currentRecord['Surname'] + "</td><td>" + LastSyncTime + " (" + TimeAgo(SubtractDates(currentRecord['LastSync']['date'])) + ")" + "</td></tr>");
            }
        }
    }
});
}

我执行此操作的方法是删除以下行：

$('#dataTables-example td').remove();
$("#dataTables-example tr:empty").remove();
var syncStatusTableBody = $('#dataTables-example').children('tbody');
var syncStatusTable = syncStatusTableBody.length ? syncStatusTableBody : $('#dataTables-example');
// Append to sync status table
syncStatusTable.append("<tr id=" + currentRecord["PatientID"] + "><td class='patientListNames'>" + currentRecord['Firstname'] + ' ' + currentRecord['Surname'] + "</td><td>" + LastSyncTime + " (" + TimeAgo(SubtractDates(currentRecord['LastSync']['date'])) + ")" + "</td></tr>");

添加以下以下行：

var tableRecord = '';
// Append to sync status table
tableRecord += "<tr id=" + currentRecord["PatientID"] + "><td class='patientListNames'>" + currentRecord['Firstname'] + ' ' + currentRecord['Surname'] + "</td><td>" + LastSyncTime + " (" + TimeAgo(SubtractDates(currentRecord['LastSync']['date'])) + ")" + "</td></tr>";
$('#dataTables-example').find('tbody').html(tableRecord);

因此，要查看代码中的差异，请检查以前的代码到工作代码

工作代码：

// Get all sync status' logging, and append to sync logging table (sync page)
function GetSyncStatusUsers(selectFromGroup)
{
var currentArray;


$.post("php/getServerLogging.php",
{
    command: "GetLastSyncUser",
    groupName: selectFromGroup
})

.success(function (data)
{
    var jsonMessage = JSON.parse(data);

    // Check to see if response message returns back "OK"
    if (jsonMessage.RESPONSE == 'OK')
    {

        if ($("#dataTables-example").length)
        {

            var tableRecord = '';

            // Loop through all the returned records and add them to select box
            for (var i = 0; i < jsonMessage.RECORDS.length; i++)
            {

                var currentRecord = jsonMessage.RECORDS[i];

                // Returned from mysql timestamp/datetime field
                var LastSyncTime;
                if (currentRecord['LastSync'] == null)
                {
                    LastSyncTime = "No Last sync record found";
                }
                else
                {
                    // Return last sync time in UK format
                    LastSyncTime = GetCurrentDateUKFormatFromSQL(currentRecord['LastSync']['date']);
                }

                // Append to sync status table
                tableRecord += "<tr id=" + currentRecord["PatientID"] + "><td class='patientListNames'>" + currentRecord['Firstname'] + ' ' + currentRecord['Surname'] + "</td><td>" + LastSyncTime + " (" + TimeAgo(SubtractDates(currentRecord['LastSync']['date'])) + ")" + "</td></tr>";
            }

            $('#dataTables-example').find('tbody').html(tableRecord);
        }
    }
});
}

在不刷新整个表的情况下追加更新到表

2 个答案: