Question

我希望我的Ui具有一个文本字段，用户将在其中输入streamId streamId的值将是1,2,3等在单击“确定”后，我的数据库应根据流ID在表的屏幕内容上显示一个表。这些是代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="boxx">
            white space 
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box">
            2
        </div>
    </div>
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box">
            3
        </div>
    </div>
	  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box">
            4
        </div>
    </div>
	  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="box">
          5
      </div>
    </div>
    </div>
</div>


   
</body>
</html>

这是页面的UI代码。

<!DOCTYPE HTML>
 
<html>
<head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
       <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	 <!--  <script src="/js/jqueryAjaxGet.js"></script> -->
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript">
 $(document).ready(function() {
    $('#example').DataTable( {
       	"processing": true,
       	"serverSide": true,
		"bPaginate": false,
		"bFilter": false,
		"bInfo": false,
	    "ajax": {
	        "url": "/Spring-Test/college/streamId",
	        "dataSrc": ""
	    },
	    "columns": [
	        { "data": "collegeId" },
	        { "data": "collegeName" },
	        { "data": "collegeAddress" }
	    ]
    } );
} );
</script>
</head>
 
<body>
<div class="container">
    
     <input type="number" name="streamId" placeholder="search"/>
    <a href="#" onclick="function()"></a> 
	<table id="example" class="display" style="width:100%">
	 
		<thead>
		    <tr>
		        <th>id</th>
		        <th>Name</th>
		        <th>Address</th>
		    </tr>
		</thead>
	</table>
	<!-- <h1>Customer Table</h1>
		<div class="row col-md-7 table-responsive">
			<table id="customerTable" class="table table-bordered table-hover">
				<thead>
					<tr>
						<th>Id</th>
						<th>Name</th>
						<th>Age</th>
						<th>Street</th>
						<th>Postcode</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div> -->
</div>
	
</body>
</html>

这是我的控制器。我该怎么办？传递streamId并获取表。

Answer 1

您应该尝试添加一个click事件，以从某些输入中获取要搜索的ID：

$('#myInputId').on('click',function(){
 var id = this.value;
 //here check if is a valid id then run a fucntion to load your table
 loadTable(id);
});

现在让我们检查一下功能：

function loadTable (Id){


exampleTable = $('#exampleTable').DataTable();
if ($.fn.DataTable.isDataTable("#exampleTable")) {
  exampleTable.destroy();
  $('#exampleTable tbody').remove();
} // check if table exist and destroy previous data set
//Your datatable should be declared like this:

  var example= $('#example').DataTable({
                "destroy": true,
                "responsive":{
                  "details": {
                  renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                      return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                          '<td>'+col.title+':'+'</td> '+
                          '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                    } ).join('');

                    return data ?$('<table/>').append( data ) :false;
                  }
                }
              },
                "autoWidth": false,
                      "ajax": {
                          "url": 'some.php',
                          "method": 'POST',
                          data:{accion:"SLC", Id : Id}
                      },
                      "columns": [
                          {"data": "client"},
                          {"data": "name"},
                          {"data": "lastname"},
                          {"data": "device"},
                          {"data": "city"},
                          {
                       className: "center",
                       defaultContent:"<select id='idSelect' name ='idSelect'  ><option value='default'>Seleccionar</option><option value='1'>hello</option></select>"
                     }
                      ],
                      "language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
                        "columnDefs": [
                          {
                            "className": "dt-center", "targets": "_all"
                           }
                        ]
                  }
                );

}

希望有帮助

将UI连接到控制器和数据库

1 个答案: