来自datatables url中的输入的动态值

时间:2021-05-17 14:29:09

I have a datatable inside a modal form and I need load it dynamically in serverside, I have a input where I catch value and need to send it via javascript (or other method different than get it from modelAttribute object)to load the table.

我有一个模态形式的数据表,我需要在服务器端动态加载它,我有一个输入,我捕获值,需要通过javascript(或其他方法不同于从modelAttribute对象获取它)来加载表。

this is the datatable, I need the value stored in #idCProp input

这是数据表,我需要存储在#idCProp输入中的值

<table th:if="${entity.formulario == 'formPerson'}" class="table dataTable" dt:deferLoading="10" id="propDT" dt:reloadSelector="#reloadProponent"  dt:table="true"  dt:sortable="true" dt:displaylength="10" dt:dom='ftip' dt:url="@{/person/loadProponents/__${entity.id}__/ **VALUE FROM INPUT**}" dt:serverside="true">
<thead>
    <tr>
        <th dt:property="entity.id" dt:renderFunction="nameAndLastName">Persona</th>
        <th dt:property="entity.id" dt:sortable="false" dt:renderFunction="getProposalPost">Cargo</th>
        <th dt:property="entity.id" dt:sortable="false" dt:renderFunction="getProposalInstitution">Institución</th>
        <th dt:property="sendMethod.name" dt:sortable="false">M&eacute;todo de env&iacute;o</th>
        <th class="operations" dt:sortable="false" dt:property="id" dt:renderFunction="idToUrlProp"></th>
    </tr>
</thead>
</table>
<input type="hidden" id="idCProp"/>

and this is the controller method

这是控制器方法

@RequestMapping(value = "/person/loadProponents/{idPerson}/{idCandidature}", method = RequestMethod.GET)
    public @ResponseBody DatatablesResponse<Proposal> loadProponents(@PathVariable("idPerson") Long idPerson,@PathVariable("idCandidature") String idCandidature,
            @DatatablesParams DatatablesCriterias criterias, HttpServletRequest request) {
   //Do some stuff...
}

How can I send idCandidature variable?

我该如何发送idCandidature变量?

1 个解决方案

#1


2  

I think the better way it's using dataTables API and request variables to do it.

我认为更好的方法是使用dataTables API和请求变量来完成它。

Your view code would be :

您的查看代码将是:

<form id="searchForm">
    <input type="hidden" id="idCProp"/>
    <button class="btn btn-primary" type="button" 
       th:text="#{proposals.find}" 
       onclick="findProposals();"></button>

</form>
<table th:if="${entity.formulario == 'formPerson'}" class="table dataTable" dt:deferLoading="10" id="propDT" dt:reloadSelector="#reloadProponent"  dt:table="true"  dt:sortable="true" dt:displaylength="10" dt:dom='ftip' dt:url="@{/person/loadProponents/__${entity.id}__}" dt:serverside="true">
<thead>
<tr>
    <th dt:property="entity.id" dt:renderFunction="nameAndLastName">Persona</th>
    <th dt:property="entity.id" dt:sortable="false" dt:renderFunction="getProposalPost">Cargo</th>
    <th dt:property="entity.id" dt:sortable="false" dt:renderFunction="getProposalInstitution">Institución</th>
    <th dt:property="sendMethod.name" dt:sortable="false">M&eacute;todo de env&iacute;o</th>
    <th class="operations" dt:sortable="false" dt:property="id" dt:renderFunction="idToUrlProp"></th>
</tr>
</thead>
</table>


<script th:inline="javascript">
    function findProposals() {
        oTable_propDT.columns(2).search($("#idCProp").val());
        ... // more parameters if you need
        oTable_propDT.columns(n).search($("#yoursearchparameterfrominput").val());
        oTable_propDT.draw();
    }
</script>

In your controller you already have everything you need :

在您的控制器中,您已经拥有了所需的一切:

@RequestMapping(value = "/person/loadProponents/{idPerson}", method = RequestMethod.GET)
public @ResponseBody DatatablesResponse<Proposal> loadProponents(@PathVariable("idPerson") Long idPerson, HttpServletRequest request) {
   DatatablesCriterias criterias = DatatablesCriterias.getFromRequest(request);
   DataSet<Proposal> dataset = proposalService.getProposalsDataset(criterias);
   return DatatablesResponse.build(dataset, criterias);
}

Finally you just need to write proposalService#getProposalsDataset(DatatablesCriterias criterias) method that builds Dataset, I think it's nothing special.

最后你只需要编写建立数据集的proposalService#getProposalsDataset(DatatablesCriterias criterias)方法,我认为这没什么特别的。

#1


2  

I think the better way it's using dataTables API and request variables to do it.

我认为更好的方法是使用dataTables API和请求变量来完成它。

Your view code would be :

您的查看代码将是:

<form id="searchForm">
    <input type="hidden" id="idCProp"/>
    <button class="btn btn-primary" type="button" 
       th:text="#{proposals.find}" 
       onclick="findProposals();"></button>

</form>
<table th:if="${entity.formulario == 'formPerson'}" class="table dataTable" dt:deferLoading="10" id="propDT" dt:reloadSelector="#reloadProponent"  dt:table="true"  dt:sortable="true" dt:displaylength="10" dt:dom='ftip' dt:url="@{/person/loadProponents/__${entity.id}__}" dt:serverside="true">
<thead>
<tr>
    <th dt:property="entity.id" dt:renderFunction="nameAndLastName">Persona</th>
    <th dt:property="entity.id" dt:sortable="false" dt:renderFunction="getProposalPost">Cargo</th>
    <th dt:property="entity.id" dt:sortable="false" dt:renderFunction="getProposalInstitution">Institución</th>
    <th dt:property="sendMethod.name" dt:sortable="false">M&eacute;todo de env&iacute;o</th>
    <th class="operations" dt:sortable="false" dt:property="id" dt:renderFunction="idToUrlProp"></th>
</tr>
</thead>
</table>


<script th:inline="javascript">
    function findProposals() {
        oTable_propDT.columns(2).search($("#idCProp").val());
        ... // more parameters if you need
        oTable_propDT.columns(n).search($("#yoursearchparameterfrominput").val());
        oTable_propDT.draw();
    }
</script>

In your controller you already have everything you need :

在您的控制器中,您已经拥有了所需的一切:

@RequestMapping(value = "/person/loadProponents/{idPerson}", method = RequestMethod.GET)
public @ResponseBody DatatablesResponse<Proposal> loadProponents(@PathVariable("idPerson") Long idPerson, HttpServletRequest request) {
   DatatablesCriterias criterias = DatatablesCriterias.getFromRequest(request);
   DataSet<Proposal> dataset = proposalService.getProposalsDataset(criterias);
   return DatatablesResponse.build(dataset, criterias);
}

Finally you just need to write proposalService#getProposalsDataset(DatatablesCriterias criterias) method that builds Dataset, I think it's nothing special.

最后你只需要编写建立数据集的proposalService#getProposalsDataset(DatatablesCriterias criterias)方法,我认为这没什么特别的。