如何在Json上排序日期数据表

Question

I have 2 input date

<form id="refresh" method="post" action="income.php">
   <input type="text" id="dari" name="dari" />
   <input type="text" id="sampai" name="sampai" />
   <button type="submit">refresh</button>
</form>

and for js :

<script>
$(document).ready(function() {
    $('#dari').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd'
    })
    $('#sampai').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd'
    })
});
</script>

so how if I click button, it just refresh table, and date is change. this is my ajax when click button, it just refresh datatable. also date range change like I post on input #dari and #sampai

<script type="text/javascript">
$(document).ready(function() {
    $('#refresh').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function(status) {
                var datanya = JSON.parse(JSON.stringify(status));
                $('#income').bootstrapTable('refresh', {
                    url: '../../tables/income.php'
                });
            }
        })
        return false;
    });
})
</script>

Add whole code income.php

<?php
header('content-type:application/json');

include '../connetion.php';
    $select=mysql_query("select nama_menu, qty, price, disc, tgl_transaksi from tb_transaksi where tgl_transaksi BETWEEN '$_POST[dari]' AND '$_POST[sampai]'");

$row=array();

while($row=mysql_fetch_array($select))
{
    $arrayx=array(  "nama_menu"=>$row['nama_menu'],
                    "qty"=>$row['qty'],
                    "price"=>$row['price'],
                    "disc"=>$row['disc']
                );

    $rows[] = $arrayx;
}

echo json_encode($rows);
?>

Answer 1

You are using a form. If you submit a form, it will refresh the page. Instead make the button type as button and use the click event of that button.

 <form id="refresh" method="post" action="income.php">
       <input type="text" id="dari" name="dari" />
       <input type="text" id="sampai" name="sampai" />
       <button id='ref' type="button">refresh</button>
    </form>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#ref').click(function() {
            $.ajax({
                type: 'POST',
                url: $("#refresh").attr('action'),
                data: $("#refresh").serialize(),
                dataType: 'json',
                success: function(status) {
                    var datanya = JSON.parse(JSON.stringify(status));
                    $('#income').bootstrapTable('refresh', {
                        url: '../../tables/income.php'
                    });
                }
            })
            return false;
        });
    })
    </script>