Hello,

It’s pretty easy All pages you see in live preview are for demonstration purposes only. All layouts contain Starter Kit – set of basic pages, that don’t have any extra components: plugins, extensions, libraries. CSS and JS in this kit include only core functionality, so you can take a blank page, add components and use functionality that you actually need, without any extra code.

Documentation also includes guide about LESS files compilation, starter kit etc. It actually depends on what exactly you need it for, but feel free to ask any questions about the template and its functionality.

Thanks!

Thanks buddy but now I have an issue, I have 30 users in a database and I display them on a table all in the same page and I saw that you have an example with datatable where you display them in different pages and it says “Showing 1 to 10 of 15 entries” with the option of selecting X page of entries. Now I know that you use the datatable api, I’m kinda new in the world of web development with PHP. So May I know how did you do it?

Hey,

you don’t need php to use datatables api, all you need to do is to initialize datatables with a set of available options and add data source. “Showing 1 to 10 of XX entries” is a feature, which is available by default in basic initialization. You can change display length option – custom values or display all table rows.

Here is an example of how you can do it:

$('#example').DataTable({
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});

and this is online example.

Thanks

Kopyov you are helping me a lot, thanks buddy, now it’s working :DDDD

You are always welcome! Let me know if you have any other questions

:’( It’s me again, I have a problem with the datatable api and maybe you know how to solve it. So my database has 100 entries but I just get 10 entries per request to the database and the total of entries that exist on the database.

After making my request to the database I know that I will need a total of 10 pages to show the 100 entries.

I want to edit the total number of pages show by datatable so it will always be 10 pages and each time I change of page it will make a request to my database to load the next 10 entries.

First of all I don’t know how to edit the total number of pages regardless the number of entries been shown and after that how can I make a request on click of X page?

I keep looking for an answer on the internet but I can’t find it.

Hey.

This can happen with various reasons: from typos in the data file and to your server settings. Here is a note by datatables devs. You can also check this post if you are using php.

All demos available in Limitless are static and don’t have any scripts or databases. Static versions work just fine as you can see in live preview, so the issue could be on your side. I’d suggest you to go through Stackoverflow or Datatables forum and search for specific use cases, because i don’t know your configuration and project details.

Thanks

Thanks. I will have to ask the server admins. It might be on their end. I did not alter any of those pages so code is exactly like demo. One more question for now. Do you have any examples of accordions integrated in table? So if you have a table with data from the 50 United States and 10 regions, I only want to show the 10 regions initially. Then give the option to collapse all or specific regions.Just curious if this is something you have handy. Thanks!

Hello there.

Yes it won’t work, because file editor_ckeditor.js contains multiple initializations of CKEditor in a single file. When you remove div containers from your markup, CKEditor tries to initialize all examples, but they don’t really exist. You need to remove other examples from editor_ckeditor.js file as well and all will be working fine.

Thanks

Thanks it’s working but when adding fixed sidebar menu then again jQuery code is not working. Can you please give the solution for that and same thing I have to do like ckeditor in dashboard if I want to remove some charts?

The reason is the same – you are trying to initialize plugins that are not loaded or attach to non-existing element. As stated in documentation, all files located in assets/js/pages/ are for demo preview only and contain all examples of a certain page functionality.

Seems like you are using fixed sidebar with Nicescroll plugin, but the plugin itself isn’t loaded. Please check if you have added path to nicescroll.min.js, if you are using layout_fixed_custom.js file.

The same is for dashboard – if you don’t use any of the charts, you need to remove both – element from html and js piece of code in dashboard.js file, because you will always get an error if you try to init any plugin in the element that doesn’t exist in your markup.

Also please check your console for js errors, in most cases they will give you a hint where to look for.

Please let me know if that works for you or feel free to send me your code example to e.kopyov[at]gmail.com – this will be much faster and easier to resolve your issue

Thanks

Thank for help. I will try it and if doesn’t work then I will email you with code. And this template is awesome with too much functionality.

Sure, let me know if you have any other issues.

Thanks!

How can I put verifcation for file extension in file upload using AJAX Upload in Bootstrap Uploader example like only .pdf or .jpg? And how can I show my custom error though AJAX Upload in Boostrap Uploader examples?

I’m using PHP

Hi.

You need to do the following:

1. Open form_validation.js file located in assets/js/pages/ folder

2. Copy validation settings and insert to your file. Or use this file as a base, but don’t forget to remove inits of other plugins. Don’t forget to wrap your file uploader in form

3. Find this piece of code:

// Input group, styled file input
else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
    error.appendTo( element.parent().parent() );
}

and insert the following piece of code ABOVE (before) it:

// Bootstrap file input
else if (element.parents().hasClass('file-input')) {
    error.appendTo( element.parent().parent().parent().parent() );
}

This is needed for a correct error/success label placement

4. Besides validate.min.js file, include path to additional_methods.min.js file, which includes file type validation method

5. Add name and id attributes to your file input, for example name=”ajax_upload” and id=”ajax_upload”

6. Add validation rules for it in your validation config:

rules: {
    ajax_upload: {
        required: true,
        accept: "*/pdf" 
    }
}

and below it add your error messages:

messages: {
    ajax_upload: {
        required: "Allowed file type: .pdf" 
    }
}

7. That’s it. You can remove other rules if you don’t need them. Tested this use case and everything works fine.

Let me know if something went wrong.

Thanks

Thank for this, I want to ask if I want to remove the upload button from bootstrap uploader example specific file upload because I’m using other form components together with specify file upload example so when I submit the form I want to access this upload file with other textbox data in the PHP code.

Understood, you just need to add showUpload: false option to your uploader configuration, this will hide upload button. You can do the same with Remove button if needed. For more plugin options please refer to this page.

Thanks

Thanks I got it.

If I also want to remove the upload from the file preview in ajax upload then?

I think you need to change footer {actions} option in layoutOptions. Also check some ajax upload examples with different options, probably you will find a desired configuration there.

Thanks

I am asking that I want drag & drop option for simple bootstrap file uploader.

I am sorry, but i don’t clearly understand what you want to do.

You’ve asked how to remove upload button from uploader and upload button from thumbnails in AJAX uploader with drag and drop feature. Both questions are answered. Did i understand your questions correctly?

The last one – you want to use drag and drop feature in non-ajax uploader, right? If yes, unfortunately this is not possible at the moment, as stated on plugin website, this feature is available only in ajax uploader.

Thanks

Ok Thanks I got it…

Always welcome. Let me know if you have any other questions.

Hi, I’m getting one more problem in “Datatables Basic”. When I’m removing the column in the table then the filter and the pagination is not visible and also my jQuery code in not running. O have also remove the other table init from js file, but still if I change any number of column in the basic table as per my requirement then filter and pagination is not visible.

Hi.

There is a demo configuration in datatables_basic.js, where ordering functionality is turned off in the “Actions” column:

columnDefs: [{ 
    orderable: false,
    width: '100px',
    targets: [ 5 ]
}],

The problem is that if your table has less than 6 columns, datatables throws error that it can’t detect 6th column and apply an option stated above. Simply remove this piece of code and your table will work as expected.

Thanks

Also – the datable search/ number of rows menu appears when there is no row in the table (i.e. when there is no data to be displayed). But does not show if there is one or more rows available to display. Thanks.

Hi,

I think the problem is with default’s columnDefs option. If you open datatables_advanced.js file, you can see defaults that are used in all tables:

// Setting datatable defaults
$.extend( $.fn.dataTable.defaults, {
    autoWidth: false,
    columnDefs: [{ 
        orderable: false,
        width: '100px',
        targets: [ 5 ]
    }]
    .......
});

Which means – 6th column doesn’t have ordering (index starts from 0). This option is applied to all demo tables – disabled ordering for Action column.

In ”.datatable-columns” example, columnDefs is overridden. If your tables have less than 6 columns, you will get this error. Try to remove columnDefs option from defaults and most probably your issues will be fixed.

Thanks

Hey,

Although i can be done, i would’t suggest it, because from the UX point of view content area will be too small for the user. There is no a ready-to-use solution, but you can add it yourself by adding:

@media (min-width: @grid-float-breakpoint) {
    position: fixed;
    top: @navbar-height + @line-height-computed;
    left: @sidebar-base-width;
    right: 0;
    z-index: @zindex-navbar-fixed;
}

to the .page-header class in type.less (located in assets/less/bootstrap-limitless/). Keep in mind please that on mobiles all navbars as well as sidebars are static, you need to keep the code above inside media queries to make page header static on mobiles.

Also you need to change left edge if sidebar is collapsed =>

@media (min-width: @grid-float-breakpoint) {
    .sidebar-xs .page-header {
        left: @sidebar-mini-width;
    }
}

Should work this way. Thanks

I edited the type.less file and pasted the css rules but nothing changes

// Page header // —-—-—-—-—-

// Base .page-header {

@media (min-width: @grid-float-breakpoint) {
    position: fixed;
    top: @navbar-height + @line-height-computed;
    left: @sidebar-base-width;
    right: 0;
    z-index: @zindex-navbar-fixed;
}

@media (min-width: @grid-float-breakpoint) {
    .sidebar-xs .page-header {
        left: @sidebar-mini-width;
    }
}

margin: 0 0 @line-height-computed 0;
padding-bottom: 0;
background-color: #fff;

// Content
&:not(.page-header-transparent) {
    > .page-header-content {
        & + .navbar,
        & + .navbar-collapse > .navbar {
            border-bottom: 0;
        }
    }
}

// Setup desktop view
@media (min-width: @screen-sm-min) {
    .heading-elements.collapse {
        display: block;
        visibility: visible;
    }
}

}

Have you re-compiled less files after the changes?

Thanks

haha sorry never worked with less, so if i understood well there is a command and it will trnaslate the less to native css to a final file which is most probably the core.css??

The template’s styling is fully based on less pre-processor. Documentation includes a complete guide about less compiling – using desktop apps and gulp. Also latest version includes gulpfile.js file, once you get gulp up and running, it will generate css files automatically when you save changes in any less file.

Also here is a great article about installing and running tasks in gulp.

If you having any issues with it, i can generate new css file set tomorrow for you with these changes.

Thanks