我正在使用破折号数据表构建带有过滤器（内置）的表。我已经使用css文件为表格设置样式。现在，当我在过滤器中提供输入时，它会显示包含包含内容的输入。我已经检查了代码和CSS文件，我找不到我哪里出错了。 我在python中的代码：
import sys
from urllib.parse import parse_qs
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as table
import pandas as pd
from dash.dependencies import Output, Input
from urllib.parse import quote
from datetime import datetime, timedelta
# import files
import sqlQuries
import validateUser
import filterPage
from application import app
sys.path.append('/home/ec2-user/projects/dashboard/')
data = pd.DataFrame(columns=['Created Date', 'Source of Incoming', 'Ward Name', 'Vehicle No', 'Incoming Waste',
'Type of waste', 'Unit Rate', 'Bill No./Receipt no', 'Total Amount(Rs)',
'Mode of payment'])
layout = dcc.Loading(id='inwardLoading', type='circle', children=[
html.Div([
dcc.Location(id='urlInward', refresh=False),
html.Div(id='user1', style={'display': 'none'}),
html.Div([
html.Div(
"All the orders created from Web Portal & Mobile App are displayed here ",
style={'text-align': 'left'}, className='desc-text col-10'),
html.Div([
html.A(
[
html.Img(src='../assets/download.png')
],
id='downloadChosen',
download="inwardData.csv",
href="",
target="_blank",
className="btn btn-outline-secondary downloadBtn float-right"
)
], className='col-2')
], className='row'),
html.Div([
html.Table([
table.DataTable(id='incomingTable',
columns=[{'name': i, 'id': i, 'deletable': True} for i in data.columns],
page_current=0, page_size=20, page_action='custom', filter_action='custom',
sort_action='custom', filter_query="", sort_mode='single', sort_by=[])
], className='table table-responsive'),
html.Div(id="paginationStr")
])
], className='container-fluid')
])
def getuserId(value):
print(value)
if value is None:
raise dash.exceptions.PreventUpdate("given a valid userId as parameter")
userToken = parse_qs(value).get('?token')[0]
user = validateUser.getUserIdFromToken(userToken)
print(user)
return user
@app.callback(
[
Output('incomingTable', 'data'),
Output('downloadChosen', 'href'),
],
[
Input('incomingTable', 'page_current'),
Input('incomingTable', 'page_size'),
Input('incomingTable', 'sort_by'),
Input('incomingTable', 'filter_query'),
Input('urlInward', 'search')
])
def loadDate(page_current, page_size, sort_by, filter, value):
user = getuserId(value)
dff = sqlQuries.getIncomingWasteData(user)
if dff.empty:
dff['Created Date'] = "No Data"
return dff.to_dict('records'), "data:text/csv;charset=utf-8," + quote("")
dff['Created Date'] = [str(datetime.strftime(i, '%d-%m-%Y')) for i in dff['Created Date']]
dff['Total Amount(Rs)'] = [int(i) for i in dff['Total Amount(Rs)']]
if filter is not "":
dff = filterPage.getFilteredTable(dff, filter)
if len(sort_by):
dff = dff.sort_values(
sort_by[0]['column_id'],
ascending=sort_by[0]['direction'] == 'asc',
inplace=False)
load = dff.iloc[page_current * page_size:(page_current + 1) * page_size]
csvString = dff.to_csv(index=False, encoding='utf-8')
csvString = "data:text/csv;charset=utf-8," + quote(csvString)
return load.to_dict('records'), csvString
我的CSS文件
/*Report Layout Styling*/
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter {
border: 1px solid black;
border-radius: 10px;
padding: 10px;
/*border-top-left-radius: 5px;*/
/*border-bottom-left-radius: 5px;*/
}
@font-face {
font-family: 'font-light';
src: url('./fonts/soleil-light.ttf');
}
@font-face {
font-family: 'font-regular';
src: url('./fonts/soleil-regular.ttf');
}
@font-face {
font-family: 'font-medium';
src: url('./fonts/soleil-semibold.ttf');
}
@font-face {
font-family: 'font-bold';
src: url('./fonts/soleil-bold.ttf');
}
@font-face {
font-family: 'font-book';
src: url('./fonts/soleil-book.ttf');
}
.grey-bg {
background-color: #5b7583;
color: #fff;
font-family: font-regular;
font-size: 12px;
}
/*Styling table*/
.grey-bg th:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.grey-bg th:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
table td, th{
font-family: 'font-regular';
font-size: 12px;
color: #5B7583;
border: 0!important;
text-align: left!important;
height: 45px!important;
vertical-align: middle!important;
padding: 10px!important;
}
tbody td.dash-cell{
background-color: #ffffff!important;
text-align: left!important;
padding: 10px!important;
}
tbody tr:nth-child(even) td.dash-cell {
background-color: #f9f9f9!important;
}
tbody tr td:last-child, th:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
tbody tr td:first-child, th:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
tbody th.dash-filter{
/*background-color: #f9f9f9!important;*/
border: 0 !important;
border-radius: 0!important;
}
tbody th.dash-filter input{
position: relative!important;
/*background-color: #fff!important;*/
height: 30px!important;
text-align: left!important;
padding: 0 5px!important;
border-radius: 6px;
}
tbody th.dash-filter input::placeholder{
color: #ffffff!important;
}
tbody th.dash-header{
background-color: #5b7583!important;
color: #fff;
text-align: left!important;
height: 34px!important;
padding: 0 0 0 10px!important;
}
tbody th.dash-header{
--accent: #fff!important;
}
tbody th.dash-header>div{
float: left;
}
tbody th.dash-header>div span.column-header--sort{
float: right!important;
}
tbody th.dash-header>div span.column-header-name{
float: right!important;
margin-right: 5px!important;
}
span.column-header--sort{
padding-right: 5px;
}
span.column-header--sort:hover, span.column-header--sort:focus{
color: inherit!important;
}
/*styling previous and next button */
.previous-next-container{
padding: 0 0;
border: 1px solid #c7d2d8;
margin: 15px 0!important;
border-radius: 5px!important;
display: flex!important;
height: 30px!important;
align-items: center!important;
}
.previous-next-container .first-page{
display: none!important;
}
.previous-next-container .last-page{
display: none!important;
}
.previous-next-container button.next-page{
border-left: 1px solid #5b7583!important;
opacity: 0.5!important;
padding: 0 5px 0 5px!important;
background-color: transparent!important;
}
.previous-next-container button.previous-page{
border-right: 1px solid #5b7583!important;
opacity: 0.5!important;
padding: 0 5px 0 5px!important;
background-color: transparent!important;
}
.previous-next-container input.current-page{
height: 24px!important;
width: 24px!important;
margin: 0.2em!important;
color: #fff!important;
background-color: #5b7583!important;
border-radius: 5px!important;
border-bottom: none!important;
pointer-events: none;
}
.previous-next-container input.current-page::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ffffff!important;
}
.previous-next-container input.current-page::-moz-placeholder { /* Firefox 19+ */
color: #ffffff!important;
}
.previous-next-container input.current-page:-ms-input-placeholder { /* IE 10+ */
color: #ffffff!important;
}
.previous-next-container input.current-page:-moz-placeholder { /* Firefox 18- */
color: #ffffff!important;
}
/*Styling Download tag*/
.downloadBtn {
width: 36px;
border: 1px solid #ababab!important;
background: none!important;
margin-bottom: 7px!important;
padding: 2px!important;
}
.desc-text{
text-align: left;
display: flex;
align-items: center;
color: #90a2ac;
font-size: 12px;
line-height: 15px;
padding-left: 23px!important;
}
.btn-outline-secondary.focus, .btn-outline-secondary:focus{
box-shadow: none!important;
}
.downloadBtn img{
width: 18px!important;
}
/*styling for html layout in downloadReports.py */
.headerDiv {
background-color: #5b7583 ;
color: #fff;
text-align: left;
height: 34px;
padding: 0 0 0 0;
margin-left: 1px;
}
.parentDiv{
width: 181px;
}
.customRow{
margin: 10px;
}
.customBtnDiv{
display: contents;
}
.customHeaderRow{
align-items: center;
display: contents;
}
我得到这个：-
