Jquery Datatables填充表单后

I'm trying to do a form submit (POST) with some parameters and based on the parameters I want to populate my datatable. But I'm not very good with Javascript (My language is Java), so I'm trying to do it with an Ajax call. But it won't work for me. Everything works for me, except doing a POST with parameters to the servlet. The datatable always populate automatically, but it should populate after the form submit.

我正在尝试用一些参数提交(POST)，并基于我想要填充datatable的参数。但是我不太擅长Javascript(我的语言是Java)，所以我尝试用Ajax调用来实现它。但对我没用。一切都对我有用，除了做一个带有servlet参数的帖子。datatable总是自动填充，但应该在表单提交之后填充。

Does someone know an example of my case? I read a lot of form posts here and tutorials, but none of this case (?).

有人知道我的例子吗?我在这里读了很多表单文章和教程，但是没有一个是这样的。

My code is now as follows, this works for me. Except I can't sort or search anymore in this table. What is missing?

我的代码如下所示，这对我有效。但是我不能在这个表格中进行排序和搜索。缺少的是什么?

Thank you.

谢谢你！

<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>

3 个解决方案

#1

Ok, this is the full answer for you question

好的，这就是你的问题的全部答案

You need to make three events, the first load the database information in your datatable, the second event inserts the new information on the database, and the third refresh the datatable content.

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

<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>

#2

Here the data is passed as string(formData) in ajax function and by default ajax expect the json object. Passing data in string can be done in two ways

在这里，数据作为字符串(formData)在ajax函数中传递，默认情况下，ajax希望得到json对象。在字符串中传递数据可以通过两种方式完成。

1) Append the generated query string to the url

1)将生成的查询字符串附加到url

     oSettings.jqXHR = ${esc.d}.ajax( {
           "dataType": 'json',
           "type": "POST",
           "url": sSource + "?" + formData, /*  here url need be proper, as url can have some query string params in that case it shoukd be join with "&" not "?" */
           /* "data": formData, no need to have data config then */
           "success": fnCallback,
           "processData": false
          } );

2) when data is already serialized into string then set processData flag to false in ajax

2)当数据已经序列化为string时，在ajax中将processData标志设置为false

oSettings.jqXHR = ${esc.d}.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": formData,
          "success": fnCallback,
          "processData": false
          } );

#3

I have the same functionality as you. The way I approach things though is a little bit different.

我有和你一样的功能。我处理事情的方式有点不同。

What I do ...

我做什么……

<input type="text" id="searchCondition"/>

<div id="container">
  <div id="ajaxDataTable"></div> 
</div>

On document.ready I call the ajax function to get me the datatable passing the value of searchCondition to my servlet. The result (THIS IS JUST THE TABLE) is put in the ajaxDataTable div. On success of the ajax command, I do the normal initializations on the datatable.

在文档。准备好了，我调用ajax函数，将searchCondition的值传递给我的servlet。结果(这只是表)被放到ajaxDataTable div中。

Now on any search, I call the same ajax command and pass again the search condition.

现在，在任何搜索中，我都调用相同的ajax命令并再次传递搜索条件。

Works fine for me!

对我来说很不错!

#1