个人中心
gpt4 book ai didi

javascript - Jquery 数据表在表单发布后填充

转载 作者：搜寻专家 更新时间：2023-11-01 04:54:45 24 4
gpt4 key购买 nike

我正在尝试使用一些参数进行表单提交 (POST)，并基于我想要填充数据表的参数。但是我不太擅长 Javascript(我的语言是 Java)，所以我尝试通过 Ajax 调用来实现。但这对我不起作用。除了对 servlet 执行带有参数的 POST 之外，一切都对我有用。数据表始终自动填充，但应在表单提交后填充。

有人知道我的案例吗？我在这里阅读了很多表单帖子和教程，但没有一个是这种情况(？)。

现在我的代码如下，这对我有用。除了我不能再在这张表中排序或搜索。缺少什么？

谢谢。

<script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"></script>

<form name="myform" id="myform" action="" method="POST">  
  <label for="season">Season:</label>  
  <input type="text" name="season" id="season" value=""/> <br />
  <label for="type">Type:</label>  
  <input type="text" name="type" id="type" value=""/> <br/>
  <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form>

<table class="display" id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>NationId</th>
      <th>RegionId</th>
      <th>Attendance</th>
    </tr>
  </thead>
  <tbody>
    <!-- data goes here -->
  </tbody>
</table>

<script>
  $("#btnSubmit").click( function() {
    var formData = "season=" + $("input#season").val() + "&type=" + $("input#type").val();
    $('#example').dataTable( {
      "bJQueryUI": true,
      "bProcessing": true,
      "bDestroy": true,
      "sAjaxSource": "/servlets/service/competitions/",
      "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
        oSettings.jqXHR = ${esc.d}.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": formData,
          "success": fnCallback
          } );
      }
    } );
  } );
</script>

最佳答案

好的，这就是你问题的完整答案

您需要创建三个事件，第一个事件将数据库信息加载到您的数据表中，第二个事件将新信息插入数据库，第三个事件刷新数据表内容。

<html>
<head>
<script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
//Global variables 
var otable;
var dataTab;
$(document).ready(function () {
    chargeData();
    $('#btnSubmit').click(function () {
       insertData();
    });   
}); 

// 1. charge all data 
function chargeData() {
    $.ajax({
        type: "POST",
        //create a method for search the data and show in datatable
        url: "/servlets/service/competitions/",
        contentType: "application/json; charset=utf-8",
        data: '{ }',
        dataType: "json",
        success: AjaxGetFieldDataSucceeded,
        error: AjaxGetFieldDataFailed
    });
}

function AjaxGetFieldDataSucceeded(result) {
    if (result != "[]") {

        dataTab = $.parseJSON(result);
        //instance of datatable
        oTable = $('#example').dataTable({
            "bProcessing": true,
            "aaData": dataTab,
            //important  -- headers of the json
            "aoColumns": [{ "mDataProp": "season" }, { "mDataProp": "type" }],
            "sPaginationType": "full_numbers",
            "aaSorting": [[0, "asc"]],
            "bJQueryUI": true,

        });

    }
}

function AjaxGetFieldDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}

// 2. this function only insert the data in your database
function insertData() {
    var email = $("#season").val();
    var evento = $("#type").val();
    $.ajax({
        type: "POST",
        //in this method insert the data in your database
        url: "/servlets/service/competitions/",
        contentType: "application/json; charset=utf-8",
        data: '{ season : "' + season + '", type : "' + type + '"}',
        dataType: "json",
        success: AjaxUpdateDataSucceeded,
        error: AjaxUpdateDataFailed
    });
}

function AjaxUpdateDataSucceeded(result) {
    if (result != "[]") {
        alert("update ok");
        refreshDatatable();
    }
}

function AjaxUpdateDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}

// 3. This function refresh only the datatable not all page  in varius events you can call like INSERT,UPDATE,DELETE ;D
function refreshDatatable() {
    $.ajax({
        type: "POST",
        //same event used in chargeData function
        url: "/servlets/service/competitions/",
        contentType: "application/json; charset=utf-8",
        data: '{ }',
        dataType: "json",
        success: AjaxRefreshDataSucceeded,
        error: AjaxRefreshDataFailed
    });
}

function AjaxRefreshDataSucceeded(result) {
    if (result.d != "[]") {
        var jposts = result;
        dataTab = $.parseJSON(jposts);
        //when the instance of datatable exists, only pass the data :D
        oTable.fnClearTable();
        oTable.fnAddData(dataTab);
    }
}

function AjaxRefreshDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}

<script>
</head>
<body>
<form name="myform" id="myform" action="">  
  <label for="season">Season:</label>  
  <input type="text" name="season" id="season" value=""/> <br />
  <label for="type">Type:</label>  
  <input type="text" name="type" id="type" value=""/> <br/>
  <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form>

<table class="display" id="example">
  <thead>
    <tr>
      <th>SEASON</th>
      <th>TYPE</th>
    </tr>
  </thead>
  <tbody>
    <!-- data goes here -->
  </tbody>
</table>
</body>
</html>

关于javascript - Jquery 数据表在表单发布后填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15886197/

24 4 0
文章推荐： javascript - Angularjs 访问另一个工厂中的方法
文章推荐： javascript - 如何在 Phonegap 应用程序中查找内存泄漏
文章推荐： iphone - UILocalNotification iOS5 问题(未显示警报)
文章推荐： javascript - 在 JSDoc 中为内联匿名函数定义参数
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com