Как использовать JQuery Datatable с загрузчиком Jumbotron без использования табличного тега - PullRequest
0 голосов
/ 23 июня 2018

У меня есть записи в начальной загрузке jumbotron. Я хочу добавить для него разбиение на страницы и сортировку, не используя для этого никаких табличных тегов. Можно ли сделать пейджинг без табличного тега в JQuery Datatable, пожалуйста, помогите мне

это jquery

$(document).ready(function(){
    var data =eval('${dealercatalog}');
    var table = $('#cataloglist form').DataTable( {
    "aaData": data,
    "aoColumns": [
    { "mData": "extcolor"}, 
    { "mData": "imagelist"},    
    { "mData": "vin"},
    { "mData": "make"},
    { "mData": "model"},
    { "mData": "type"},
    { "mData": "fueltype"},
    { "mData": "sellingprice"},
    { "mData": "dealeraddress"},
    { "mData": "description"},
    { "mData": "Selected"}
    ]
    });
    });

Это мой бутстрап jumbotron

<c:forEach var="dc" items="${dealerCatalog}">
<c:url value="/updatect" var="url100"></c:url>
<form action="${url100}" name="upcat"
                        enctype="multipart/form-data" method="POST">
                        <div class="jumbotron">
                      <div class="container">
                       <div class="row"> 
                        <div class="col-lg-2 col-md-5 col-xs-4">
                            <img src="<c:url value="${dc.getFirstImage()}"/>" alt="Image 1" style="width:100%;">
                            <div> Use For FB Campaign                   
                                <label class="switch">
                                <c:choose>
                                <c:when test="${dc.isSelected()==true}">                                
                                    <input type="checkbox" id="ans" class="form-control" name="Selected"
                                     value="${dc.isSelected()}" checked="checked"/>
                                    </c:when>
                                    <c:otherwise>
                                    <input type="checkbox" id="ans" class="form-control" name="Selected"
                                     value="${dc.isSelected()}"/>
                                    </c:otherwise>
                                    </c:choose>
                                    <span class="slider round"></span>
                                    </label>    

                                </div>
                            </div>



                        <div class="col-lg-10">
                            <div class="row">
                            <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label">Vin:</span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-xs-8">
                             <span class="ubh-jumbotron-value">${dc.getVin()}</span>
                             </div>
                             </div>
                             </div>

                             <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label">Type:</span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-xs-8">
                             <span class="ubh-jumbotron-value">${dc.getType()}</span>
                             </div>
                             </div>
                             </div>
                             </div>


                            <div class="row">



                             <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label">Make:</span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-xs-8">
                             <span class="ubh-jumbotron-value">${dc.getMake()}</span>
                             </div>
                             </div>
                             </div>

                             <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label">Model:</span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-xs-8">
                             <span class="ubh-jumbotron-value">${dc.getModel()}</span>
                             </div>
                             </div>
                             </div>
                             </div>



                             <div class="row">


                             <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label">Selling Price:</span>
                            </div>
                            <div class="col-lg-4 col-md-5 col-xs-4">
                            <fmt:setLocale value="en_US"/>
                             <span class="ubh-jumbotron-value"><fmt:formatNumber value ="${dc.getSellingprice()}" type = "currency"/></span>
                             </div>
                             </div>
                             </div>
                             <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label">Ext Color:</span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-xs-8">
                             <span class="ubh-jumbotron-value">${dc.getExtcolor()}</span>
                             </div>
                             </div>
                             </div>
                              </div>
                             <div class="row">


                            <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label">Fuel Type:</span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-xs-8">
                             <span class="ubh-jumbotron-value">${dc.getFueltype()}</span>
                             </div>
                             </div>
                             </div>
                             <div class="col-md-6">
                            <div class="row">
                             <div class="col-lg-4 col-md-5 col-xs-4">
                            <span class="ubh-jumbotron-label"> Dealer Address:</span>
                            </div>
                            <div class="col-lg-8 col-md-7 col-xs-8">
                             <span class="ubh-jumbotron-value">${dc.getDealeraddress()}</span>
                             </div>
                             </div>
                             </div>
                             </div>
                             <div class="row">
                            <div class="col-md-12">
                            <div class="row">
                             <div class="col-lg-2 col-md-1 col-xs-1">
                            <span class="ubh-jumbotron-label">Description:</span>
                            </div>
                            <div class="col-lg-10 col-md-11 col-xs-11">
                             <span class="ubh-jumbotron-value">${dc.getDescription()}</span>
                             </div>
                             </div>
                             </div>
                             </div>


                             </div>
                             </div>
                             </div>
                      </div>
                     </form>
                      </c:forEach>




</div>

У меня есть записи в начальной загрузке jumbotron, я хочу добавить для него разбиение на страницы и сортировку не используя для этого никаких табличных тегов. Можно ли сделать пейджинг без табличного тега в JQuery Datatable, пожалуйста, помогите мне

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...