个人中心
gpt4 book ai didi

jquery - 动态获取 jquery 字段以进行 jtable 分页

转载 作者：行者123 更新时间：2023-12-01 03:38:14 25 4
gpt4 key购买 nike

我正在使用jquery通过jtable插件在jsp中进行分页

以下代码是用jsp编写的，这里要在分页中显示的所有字段都是硬编码的，这对于从具有相同列的数据库表中获取和显示数据工作正常，但如果我尝试获取来自另一个表的数据，其中列的数量或类型可能不同，它不会显示内容，所以我试图根据所选查询中的列给出这些字段名称。我将把所有列名称作为列表 

like list=[Id,name,salary,Doj,Dob,Ctc];

这个列表可能因表而异，所以我想动态地将列表中的这些值作为以下代码中的字段，就像使用迭代器之类的东西一样，我对 jquery 完全陌生。 除了一些从列表中动态获取字段值的建议

这是jsp代码，它使用ajax调用从数据库检索数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <!-- Include one of jTable styles. -->
    <link href="css/metro/crimson/jtable.css" rel="stylesheet"
        type="text/css" />
    <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet"
        type="text/css" />
    <!-- Include jTable script file. -->
    <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
    <script src="js/jquery.jtable.js" type="text/javascript"></script>
    <script type="text/javascript">
    function TxtValue()
    {
        var Selectedval = document.getElementById("data");
        document.getElementById("name").value = Selectedval.value;


        }
/************** jquery fields are hardcoded here*******************************/


    $(document).ready(function() {
                $('#PersonTableContainer').jtable({
                    title : 'Table of people',
                    paging : true, //Enable paging
                    pageSize : 10, //Set page size (default: 10)           
                    actions : {
                        listAction : 'CRUD?action=list',
                        createAction : 'CRUD?action=create',
                        updateAction : 'CRUD?action=update',
                        deleteAction : 'CRUD?action=delete'

                    },
                    fields : {
                        EMPLOYEE_CODE  : {
                            title : 'EMPLOYEE_CODE ',
                            key : true,
                            list : true,
                            create : true,
                            edit : false

                        },

                        NAME  : {
                            title : 'NAME',
                            width : '30%',
                            edit : true
                        },
                        CC : {
                            title : 'CC',
                            width : '30%',
                            edit : true
                        },
                        LOADED_COST_PA  : {
                            title : 'LOADED_COST_PA ',
                            width : '20%',
                            edit : true
                        },
                        LOADED_COST_PM  : {
                            title : 'LOADED_COST_PM ',
                            width : '30%',
                            edit : true
                        },
                        DOJ  : {
                            title : 'DOJ ',
                            width : '30%',
                            edit : true
                        },LOB   : {
                            title : 'LOB  ',
                            width : '30%',
                            edit : true
                        },LOADED_COST_PA  : {
                            title : 'LOADED_COST_PA ',
                            width : '30%',
                            edit : true
                        },ONSITE_MANAGER  : {
                            title : 'ONSITE_MANAGER ',
                            width : '30%',
                            edit : true
                        }


            }
        });
             //Re-load records when user click 'load records' button.
            $('#LoadRecordsButton').click(function (e) {
                e.preventDefault();
                $('#PersonTableContainer').jtable('load', {
                    name: $('#name').val(),
                    id: $('#id').val()
                });
            });

            //Load all records when page is first shown
            $('#LoadRecordsButton').click();
        //  $('#PersonTableContainer').jtable('load');

        /***********************************************/


        $('#id').change(function(event) {
                var columnName = $("select#id").val();
                $.get('CRUD?action=columnFilter', {
                        columnName : columnName
                }, function(response) {

                var select = $('#data');
                select.find('option').remove();
                  $.each(response, function(index, value) {
                  $('<option>').val(value).text(value).appendTo(select);
              });
                });
                });



            /*******************************************/

        });

        </script>
        </head>
        <body>
        <%!  
        public String tablename = "";  
        %>

        <%
           HttpSession sec = request.getSession();
          List columnsList=(List)sec.getAttribute("columnsList");

        %>
        <c:import url="manage_data.jsp" />
        <br/>
        <div class="filtering"
            style="width: 60%; margin-right: 20%; margin-left: 20%; text-align: center;">
            <form>
                Search By: <select id="id" name="table">
                    <option selected="selected" value="default">Complete Data</option>
                                
                    <c:forEach var="str" items="${columnsList}">
                        <option>${str}</option>
                        <br>
                    </c:forEach>

                </select>
                 Select Data:
                <select id="data" onclick ="TxtValue()"   >
                    <option  selected="selected">--NONE--</option>


                        <option></option>                
                </select>


                 Enter Value: <input type="text" name="name" id="name" />

                <button type="submit" id="LoadRecordsButton">Load records</button>
            </form>

            <div id="PersonTableContainer"></div>
        </div>
        </body>
        </html>

最佳答案

我已经找到了执行此操作的方法，我发布此内容以供正在搜索此内容的其他人引用

<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Setup and Load Data to jTable using Servlets and JSP</title>
<!-- Include one of jTable styles. -->
<link href="css/metro/crimson/jtable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
<% List<String> strList = new ArrayList<String>();
strList.add("one");
strList.add("two");
strList.add("three"); %>

var jsArray = [<% for (int i = 0; i < strList.size(); i++) { %>"<%= strList.get(i) %>"<%= i + 1 < strList.size() ? ",":"" %><% } %>];
var fields = {

    };
var arrayLength = jsArray.length;

    for(var i=0;i<arrayLength;i++)
        {
    fields[jsArray[i]] = {
        title: jsArray[i],
        width: '40%'
    };
}

    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Table of people',
            actions: {
                listAction: 'CRUDController?action=list',
                createAction:'CRUDController?action=create',
                updateAction: 'CRUDController?action=update',
                deleteAction: 'CRUDController?action=delete'
            },
            fields:fields

        });
        $('#PersonTableContainer').jtable('load');
    });

</script>
</head>
<body>
<div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;">
<div id="PersonTableContainer"></div>
</div>


</body>

关于jquery - 动态获取 jquery 字段以进行 jtable 分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27636876/

25 4 0
文章推荐： python pptx 在饼图中显示类别值
文章推荐： jquery - Firebug 在不再存在的断点处停止
文章推荐： jquery - 鼠标双击事件自动拖放
文章推荐： jquery - Android 风格拖动可调整大小的菜单
行者123
个人简介

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

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