In my project I need to use a progressbar with percentage for the very long process running. And to display the calculation of the Process to user. I foud this code:

Controller:

    public class HomeController : Controller {
        private static int progress;
        public ActionResult Index() {
            return View();
        }
        [HttpPost]
        public JsonResult Start() {
            int count = 10;
            for (int i = 0; i < count; i++) {
                progress = Convert.ToInt32(Convert.ToDouble(i) / Convert.ToDouble(count) * 100);
                System.Threading.Thread.Sleep(500);
            }
            var result = new { StartResult = "ok" };
            progress = 0;
            return Json(result);
        }
        [HttpPost]
        public JsonResult Progress() {
            var result = new { ProgressResult = progress };
            return Json(result);
        }
    }

Views

@{
    ViewBag.Title = "Index";
}

@Html.DevExpress().Button(settings => {
    settings.Name = "btnStart";
    settings.Text = "Start";
    settings.UseSubmitBehavior = false;
    settings.ClientSideEvents.Click = string.Format("function(s, e) {{ OnButtonClick(s, e, '{0}', '{1}'); }}", Url.Action("Start", "Home", null), Url.Action("Progress", "Home", null));
}).GetHtml()
@Html.DevExpress().ProgressBar(settings => {
    settings.Name = "myProgressBar";
    settings.Width = System.Web.UI.WebControls.Unit.Pixel(200);
    settings.ClientVisible = false;
}).GetHtml()

javaScript

var myTimer;
function OnButtonClick(s, e, startUrl, progressUrl) {
    StartActionOnServer(startUrl);
    StartTimer(progressUrl);
}
function StartActionOnServer(startUrl) {
    $.ajax({
        type: 'POST',
        url: startUrl,
        dataType: 'json'
    }).done(ProgressCallbackComplete).fail(CallbackError);
}
function ProgressCallbackComplete(data) {
    StopTimer();
    alert('Accomplished');
}
function StartTimer(progressUrl) {
    btnStart.SetEnabled(false);
    myProgressBar.SetVisible(true);
    myTimer = setInterval(function () {
        $.ajax({
            type: 'POST',
            url: progressUrl,
            dataType: 'json'
        }).done(TimerCallbackComplete).fail(CallbackError);
    }, 1000);
}
function StopTimer() {
    myProgressBar.SetVisible(false);
    myProgressBar.SetPosition(0);
    btnStart.SetEnabled(true);
    if (myTimer) {
        clearInterval(myTimer);
        myTimer = null;
    }
}
function TimerCallbackComplete(data) {
    myProgressBar.SetPosition(parseInt(data.ProgressResult));
}
function CallbackError() {
    StopTimer();
    alert('Callback error');
}

if I insert this code in a new project the progress bar works correctly but if i put this code in my project it doesn't work. the processor executes the Start() method and after the progress() method.

echo "<tbody";
echo "<tr>";
echo "<td>{$id}</td>";// display customer Id
echo "<td> {$firstname} {$lastname}</td>"; //display customer title,firstname,lastname
echo "<td>{$date->format('h:i A')}</td>";//display the time customer joined the queue
echo "<td><a href='#' onclick='delete_user({$id});'  
class='btn btn-danger'>btn</a> ";// Delete Record Link
  echo "<td><a href='#' onclick='delete_user2({$id});'  
class='btn btn-danger'>btn</a> ";// Delete Record Link
echo "<td align='center'>" . '<input type="button" value="Accept" name="txtaccept" onclick="Accept(this)">&nbsp;&nbsp;&nbsp;<input type="button" value="Reject" name="txtreject" onclick="Reject(this)">' . "</td>";

echo "</tr>";
echo "</tbody";
} // End while()

echo "</table>";


    <style type="text/css">
table { border-collapse: collapse; } //to remove cell spacings
table td { padding: 2px; }
tr.accepted, tr.accepted td { background-color: green; }
tr.rejected, tr.rejected td { background-color: red; }
</style>

    <script type="text/javascript">
function Accept(el)
{
   var tr = el.parentNode.parentNode; //tr
   tr.className = "accepted";
}
function Reject(el)
{
   var tr = el.parentNode.parentNode; //tr
   tr.className = "rejected";
}
</script>

Hello there is my code that works fine,to explain,when I click button accept it changes color to table row in green and clicking reject changes color to red,my problem is that when I refresh page results are refreshing too,How can I save this result I get by clicking these buttons? I am really new,Its silly question may be but you can save my day.

I have tried to display a table as a datatable. But the code for displaying that is in another PHP file, so that it is not displayed as datatable instead as a normal table. I have included all the script files also.

**activity_show.php**

<link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">

    <link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<table id="datatable-buttons" class="table table-striped table-bordered dataTable " role="grid" 
aria-describedby="datatable-buttons_info" style="width: 948px;">
                      <thead>
 <th>id</th>
                          <th>Date </th>
                          <th>id2</th>
 </tr>
                      </thead>
                      <tbody>
<td>1</td>
                <td >2</td>
                <td>3</td>

            </tr>   
 </tbody>
                    </table>    
 <script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>

    <script src="vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
    <script src="vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
    <script src="vendors/jszip/dist/jszip.min.js"></script>
    <script src="vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="vendors/pdfmake/build/vfs_fonts.js"></script>

Using the below given code the table is called for displaying.

 **activity.php**

    <div class="row">
          <div id="userTable"></div>
          </div>
      <script type="text/javascript">
        $(document).ready(function(){
        showactivity();
    });
    function showactivity(){
        $.ajax({
          url: 'activity_show.php',
          type: 'POST',
          async: false,
          data:{
            show: 1
          },
          success: function(response){
            $('#userTable').html(response);
          }
        });

      }