Question

我有一个包含数百万条记录的表格，我想为ContactOwner或任何其他相关字段应用搜索过滤器。我无法实现所需的要求。请检查代码并帮助解决它。< / p>

    <!DOCTYPE html>
<html>
<head>
<style>
 <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
           <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>


* {
 box-sizing: border-box;
}

#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

 #example {
 border-collapse: collapse;
    width: 100%;
   border: 1px solid #ddd;
  font-size: 18px;
 }

  #example th, #example td {
  text-align: left;
  padding: 12px;
  }

  #example tr {
  border-bottom: 1px solid #ddd;
  }

  #example tr.header, #example tr:hover {
  background-color: #f1f1f1;
  }
  </style>
  </head>

  <body>

   <h2>My Customers</h2>

 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

  <table id="example">
  <tr class="header">
            <th>id</th>
            <th>ContactOwner</th>
            <th>LeadSource</th>
            <th>First_name</th>
            <th>Last_name</th>
            <th>AccountName</th>
            <th>Title</th>
            <th>EmailID</th>
            <th>Department</th>
            <th>Industry</th>
            <th>Phone</th>
            <th>Mobile</th>
            <th>Fax</th>
            <th>DOB</th>
            <th>Assistant</th>
            <th>AsstPhone</th>
            <th>ReportsTo</th>
            <th>LinkedIn</th>
            <th>CallStatus</th>
            <th>Street</th>
            <th>OtherStreet</th>
            <th>City</th>
            <th>State</th>
            <th>Zip</th>
            <th>Country</th>
            <th>Description</th>
  </tr>

 </table>
  <?php         
        echo '<tr>
                <td>'.$row['id'].'</td>
                <td>'.$row['ContactOwner'].'</td>
                <td>'.$row['LeadSource'].'</td>
                <td>'.$row['First_name'].'</td>
                <td>'.$row['Last_name'].'</td>
                <td>'.$row['AccountName'].'</td>
                <td>'.$row['Title'].'</td>
                <td>'.$row['EmailID'].'</td>
                <td>'.$row['Department'].'</td>
                <td>'.$row['Industry'].'</td>
                <td>'.$row['Phone'].'</td>
                <td>'.$row['Mobile'].'</td>
                <td>'.$row['Fax'].'</td>
                <td>'.$row['DOB'].'</td>
                <td>'.$row['Assistant'].'</td>
                <td>'.$row['AsstPhone'].'</td>
                <td>'.$row['ReportsTo'].'</td>
                <td>'.$row['LinkedIn'].'</td>
                <td>'.$row['CallStatus'].'</td>
                <td>'.$row['Street'].'</td>
                <td>'.$row['OtherStreet'].'</td>
                <td>'.$row['City'].'</td>
                <td>'.$row['State'].'</td>
                <td>'.$row['Zip'].'</td>
                <td>'.$row['Country'].'</td>    
                <td>'.$row['Description'].'</td>            
            </tr>';

            ?>
<script>
 $(document).ready(function() {
$('#example').DataTable();
} );

<link rel="stylesheet" href="https://code.jquery.com/jquery-1.12.4.js">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js">

</script>

 </body>
 </html>

Answer 1

最简单的实现方法是使用JQuery的dataTable库。请点击以下链接 https://datatables.net/examples/styling/bootstrap.html

library(shiny)
library(dplyr)

basedf <- data.frame(base=c("A","B","A","B","B","A"),val=1:6)

u <- shinyUI(fluidPage(

  titlePanel(h2("TabPanel Test")),
  sidebarLayout(        
    sidebarPanel(
      verbatimTextOutput("out1")
    ),        
    mainPanel(
      tabsetPanel(id="tabx",
        tabPanel("tab A", textOutput("outA")), 
        tabPanel("tab B", textOutput("outB"))
      )
    )
  )
))
s <- shinyServer(function(input,output){
  rv <- reactiveValues(curtab=NULL)

  output$outA <- renderText({
    input$tabx
    rv$curfilt <- "A"
    "this is tab A"
  })
  output$outB <- renderText({
    input$tabx
    rv$curfilt <- "B"
    "this is tab b"
  })
  output$out1 <- renderPrint({
    print(sprintf("curtab:%s",input$tabx))
    print(sprintf("curfilt:%s",rv$curfilt))
    ndf <- filter(basedf,base==rv$curfilt)
    print(ndf)
  })
})
shinyApp(u,s)

Answer 2

您可以使用 dataTable 插件搜索表记录

试试这个：

angular-cli.json
...
"style": ["../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css",...]
"scripts": ["../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",...]
XXX.component.ts
...
ngAfterViewInit() {
  $("#date").datepicker({autoclose:true});
}

$(document).ready(function() {
  $('#example').DataTable();
} );

<style>

* {
 box-sizing: border-box;
}

#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

 #example {
 border-collapse: collapse;
width: 100%;
   border: 1px solid #ddd;
  font-size: 18px;
 }

  #example th, #example td {
  text-align: left;
  padding: 12px;
  }

  #example tr {
  border-bottom: 1px solid #ddd;
  }

  #example tr.header, #example tr:hover {
  background-color: #f1f1f1;
  }
  </style>

在您的html表中应用搜索过滤器

2 个答案: