Jquery Modal对话框作为数据表服务器处理的自定义筛选

时间:2014-12-31 06:45:32

标签: jquery ajax jquery-datatables

我的webapp是Spring MVC,JAVA作为服务器端,目前我有一个数据库,包含来自数据库的数据,我想通过使用自定义jquery对话框表单进行自定义过滤,如下所示: (我知道columnFilter并且它不符合我的需要)

Jquery对话框:

<div id="divMyForm" title="Generate">
  <form:form id="myForm" method="post" action="/editSummary">
     <table border="0" style="font-size:90%;width:auto;">
        <tr>
           <td>Based on:
               <input type="radio" name="radiobutton" value="date1">date1
               <input type="radio" name="radiobutton" value="date2">date2
           </td>
        <tr>
        <td>
           <div id="divDate1" style="display: none;">
                        Date1 From <input name="date1From" type="text" value="" style="width: 90px;" class="datepicker"/> 
                        to <input name="date1To" type="text" value="" style="width: 90px;" class="datepicker"/>
           </div>
           <div id="divDate2" style="display: none;">Date2 From <input name="date2From" type="text" value="" style="width: 90px;" class="datepicker"/>
                        to <input name="date2To" type="text" value="" style="width: 90px;" class="datepicker"/>
           </div>
        </td>
       </tr>

       <tr>
         <td>Number 
           <select>
           <option value="">--Select--</option>
           <option value="1">1</option>
           <option value="2">2</option>
           </select>
         </td>  
        </tr>
        <tr>
          <td>
             <p style="display:inline"> Latest <input name="latest" min="0" type="number" value="10" style="width: 50px;" required/> records</p>
          </td>
        </tr>
        <tr>
          <td>
             <input type="submit" id="submit" value="Generate" />
             <input type="reset" id="reset" />
          </td>
        </tr>
      </table>
    </form:form>
</div>

数据表:

var dt = $('#statistictable').dataTable({"order": [[0, "asc"]],
                "sDom": '<"datatable-scroll"t>r<"F"pi>', 
                "bServerSide": true,
                "bProcessing": true,
                "sPaginationType": "full_numbers",
                "sAjaxSource": "/myapp/editSummary",
                "bDeferRender": true,
                "bLengthChange": false,
                "autoWidth": false,
                sAjaxDataProp: "aaData"
                ,"aoColumns": [
                    {"mData": "col", 'fnCreatedCell': function (nTd, sData) {
                            nTd.title = sData;
                        }},
                    {"mData": "col1", 'fnCreatedCell': function (nTd, sData) {
                            nTd.title = sData;
                        }},
                    {"mData": "col2", 'fnCreatedCell': function (nTd, sData) {
                            nTd.title = sData;
                        }},
                    {"mData": "col3", 'fnCreatedCell': function (nTd, sData) {
                            nTd.title = sData;
                        }},
                    {"mData": "col4", 'fnCreatedCell': function (nTd, sData) {
                            nTd.title = sData;
                        }},
                    {"mData": "col5", 'fnCreatedCell': function (nTd, sData) {
                            nTd.title = sData;
                        }},
                    {"mData": "col6", 'fnCreatedCell': function (nTd, sData) {
                            nTd.title = sData;
                        }}]
            });

如何将提交时的表单值传递给ajax并从控制器中检索结果?包括sEcho,iDisplayLength等。

0 个答案:

没有答案