0

ここにList.jsのドキュメントがあります

現在、以下に示すように結果をphp mysqlとして表示しています

get-name-by-date.php ファイル

$name = $_REQUEST['name'];
    $get_from_date = $_REQUEST['from_date'];
    $get_to_date = $_REQUEST['to_date'];
    if(!empty($get_name) && !empty($get_from_date) && !empty($get_to_date))
    {
//  $get_from_date = "01/01/2021";
//  $get_to_date = "01/01/2021";

    $filter_by_name_date = "SELECT * FROM TABLE_NAME WHERE NAME = '". $name ."' AND DATE_FORMAT(LOAD_DATE, '%d/%m/%Y') BETWEEN '". $get_from_date ."' AND '". $get_to_date ."';";
    $filter_by_date = mysqli_query($connection,$filter_by_name_date);
    confirm_query($filter_by_date);
    
    if(mysqli_num_rows($filter_by_date) > 0)  
      {  
           while($filter = mysqli_fetch_array($filter_by_date))  
           {  
                $output .= '  
                     <tr>  
                        <td>'.$filter["col_name_1"].'<br></td>
                        <td>'.$filter["col_name_2"].'<br></td>
                        <td>'.$filter["col_name_3"].'<br></td>
                        <td>'.$filter["col_name_4"].'<br></td>
                        <td>'.$filter["col_name_5"].'<br></td>
                     </tr>  
                ';  
           }  
      }

上記のコードは正常に動作します!

しかし問題は、結果を次のように表示することです。

ご覧のとおり、最新のレコードを取得しています。

このコードはdisplay.phpファイルです

$recent_oi_query     = "SELECT * FROM TABLE_NAME ORDER BY LOAD_DATE ASC LIMIT 1";
$recent_result_set   = mysqli_query($connect, $recent_oi_query);
$recent_record       = mysqli_fetch_array($recent_result_set);
$recent_date         = $recent_record["date_col"];
 
$query1 = "SELECT * FROM TABLE_NAME WHERE LOAD_DATE = " . "'" . $recent_date . "'";  
$result1 = mysqli_query($connect, $query1);

のように表示しています

<table>
<tbody>
             <?php  
            while($row = mysqli_fetch_array($result))  
                { ?>   
            <tr>  
            <td><?php echo $row["col_name_1"]; ?></td>
            <td><?php echo $row["col_name_2"]; ?></td>  
            <td><?php echo $row["col_name_3"]; ?></td>  
            <td><?php echo $row["col_name_4"]; ?></td>  
            <td><?php echo $row["col_name_5"]; ?></td>  
            </tr>
            <?php } ?>
        </tbody>
</table>

名前、開始日、送信ボタン付きの日付の 3 つのフィールドがあります。

AJAX 呼び出しを使用して結果を取得します

function getNamePerDate()
{
    var name = $('#SearchName').val(); 
    var from_date = $('#bindfromdate').val();
    var to_date = $('#bindtodate').val();
        $.ajax({
                dataType : 'html',
                url  : 'get-name-by-date-v1.php',
                data : {
                    name: name,
                    from_date: from_date,
                    to_date: to_date
                },
                success : function(data) {
                document.getElementById("name-list").innerHTML = data;
                console.log('Ajax - Select Success = ' + data);
                },
                error : function(ms) {
                console.log('Ajax - Select Failure = ' + ms);
                }
        
        });
}

上記のコードは get-name-by-date.php を参照しています

私の問題は、私が list.js ライブラリを使用していることです

ajaxを使用して名前と日付で検索するたびに。結果は表示されますが、ページ区切りとページビューごとのアイテムが同期されません

var NameOptions = {
  valueNames: ['name'],
  page: 10,
  pagination: true
};

var Name = new List('name', NameOptions);

$('.name-pagination').on('change', function(){
 let numberOfItems = $('.name-pagination option:selected').text();
  Name.page = numberOfItems;
  Name.update();
});

結果を照会した後、ページを変更した場合。クエリ結果が消えます。表示結果が重なり合っているためです。どうすればこれを解決できますか。

私が必要としているのは、以下の ListJS API の例を使用して、変化する結果をレンダリングする必要があることです。


<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list"></ul>

</div>
<script>
var options = {
  valueNames: [ 'name', 'date' ],
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [{
    name: 'Jonny Strömberg',
    date: 1986
  },
  {
    name: 'Jonas Arnklint',
    date: 1985
  },
  {
    name: 'Martina Elm',
    date: 1986
}];

var userList = new List('users', options, values);

userList.add({
  name: "Gustaf Lindqvist",
  born: 1983
});
<script>

URLから取得する必要があるオブジェクトの配列があり、日付から日付までで名前を取得し、リストjs APIを更新するなどのクエリを実行します。そのため、結果は互いにマージされず、ページネーションは適切に機能します。または、別のアプローチがありますか?

4

0 に答える 0