bootstarp table 열 가로 확장(동적 열)
<span style="color:#bababa;">type=</span><span style="color:#a5c261;">"text/javascript"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> </span><span style="color:#9876aa;">$</span>(<span style="color:#cc7832;"><strong>function </strong></span>() {
<span style="color:#cc7832;"><strong>var </strong></span>questionColumns = []<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#9876aa;">$</span>.<span style="color:#9876aa;">ajax</span>({
<span style="color:#9876aa;">url</span>: <span style="color:#6a8759;">"/esubjects/viewEsubjectsList"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">//
</span><span style="color:#808080;">
</span><span style="color:#808080;"> </span><span style="color:#9876aa;">type</span>: <span style="color:#6a8759;">"get"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">//
</span><span style="color:#808080;"> </span><span style="color:#9876aa;">dataType</span>: <span style="color:#6a8759;">"json"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">//
</span><span style="color:#808080;"> </span><span style="color:#9876aa;">data</span>: <span style="color:#6a8759;">'data'</span><span style="color:#cc7832;">,
</span><span style="color:#cc7832;"> </span><span style="color:#ffc66d;">success</span>: <span style="color:#cc7832;"><strong>function </strong></span>(data) {
<span style="color:#cc7832;"><strong>var </strong></span>mdata = data.<span style="color:#9876aa;">data</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#cc7832;"><strong>var </strong></span>t0 = {<span style="color:#9876aa;">field</span>: <span style="color:#6a8759;">"0"</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">title</span>: <span style="color:#6a8759;">" "</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">align</span>: <span style="color:#6a8759;">"center"</span>}<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#cc7832;"><strong>var </strong></span>num=mdata.<span style="color:#9876aa;">length</span>+<span style="color:#6897bb;">1</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#9876aa;">console</span>.<span style="color:#ffc66d;">log</span>(num)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>questionColumns.<span style="color:#ffc66d;">push</span>(t0)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#cc7832;"><strong>for </strong></span>(<span style="color:#cc7832;"><strong>var </strong></span>i = <span style="color:#6897bb;">0</span><span style="color:#cc7832;">; </span>i < mdata.<span style="color:#9876aa;">length</span><span style="color:#cc7832;">; </span>i++) {
<span style="color:#cc7832;"><strong>var </strong></span>temp = {<span style="color:#9876aa;">field</span>: i+<span style="color:#6897bb;">1</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">title</span>: mdata[i].<span style="color:#9876aa;">subjectname</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">align</span>: <span style="color:#6a8759;">"center"</span>}<span style="color:#cc7832;">;</span><span style="color:#808080;">// columns
</span><span style="color:#808080;"> </span>questionColumns.<span style="color:#ffc66d;">push</span>(temp)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}
<span style="color:#cc7832;"><strong>var </strong></span>t1 = {<span style="color:#9876aa;">field</span>: num<span style="color:#cc7832;">, </span><span style="color:#9876aa;">title</span>: <span style="color:#6a8759;">" "</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">align</span>: <span style="color:#6a8759;">"center"</span>}<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>questionColumns.<span style="color:#ffc66d;">push</span>(t1)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;"> </span><span style="color:#9876aa;">$</span>(<span style="color:#6a8759;">'#class_mark'</span>).<span style="color:#ffc66d;">bootstrapTable</span>(<span style="color:#6a8759;">'destroy'</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span><span style="color:#9876aa;">$</span>(<span style="color:#6a8759;">'#class_mark'</span>).<span style="color:#ffc66d;">bootstrapTable</span>({
<span style="color:#9876aa;">url</span>: <span style="color:#6a8759;">"/report/queryRClassMark"</span><span style="color:#cc7832;">, </span><span style="color:#808080;">// URL(*)
</span><span style="color:#808080;"> </span><span style="color:#9876aa;">method</span>: <span style="color:#6a8759;">'post'</span><span style="color:#cc7832;">, </span><span style="color:#808080;">// (*)
</span><span style="color:#808080;">// classes: 'table table-hdgw',
</span><span style="color:#808080;"> </span><span style="color:#9876aa;">dataType</span>: <span style="color:#6a8759;">"json"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">// contentType: 'application/json',
</span><span style="color:#808080;">// queryParams: {},// (*)
</span><span style="color:#808080;">
</span><span style="color:#808080;"> </span><span style="color:#9876aa;">columns</span>: questionColumns<span style="color:#cc7832;">,
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;"> </span>})
<span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}
})
})<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#e8bf6a;">
html에 table 하나만 넣으면 ok:
class="table table-striped" id="class_mark" align="center"
striped="true" data-height="360" data-click-to-select="true">
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.